Etiquetas

, , , , , , , , , , , , , , , , , ,

¡Buenas cracks!

Soy @davidnezan y aquí vuelvo con nuevas cosas que tengo entre manos y que estuve haciendo este fin de semana.

Consiste en hacer mis primeros componentes visuales para Angular2 animados. Y os preguntaréis: ¿Y eso qué es?

angular2

Basándome en el siguiente ejemplo: https://web-animations.github.io/web-animations-demos/#animate_css/, he usado las transformaciones que usan en el ejemplo y las he aplicado a mis componentes en AngularJS (aquí puedes descargar angular2).

En unos días os compartiré el repositorio de los componentes, que aún se están haciendo en el horno.

Se basará en hacer diferentes efectos, sobre un componente html que definiremos en el html template y se le aplicará un estilo definido en el fichero css del componente. De esta forma, la animación estará hecha para cualquier tipo de componente html, el que queramos o necesitemos para nuestro proyecto.

Aplicaremos la animación de la siguiente forma:

<componente_html (click)=”show = !show” [@animation]=”show”/>

De esta forma, cambiamos entre dos estados al clicar el componente. Y, al cambiar entre los dos estados, salta la animación definida en el Componente Typescript. Pero todo eso es transparente para el diseñador. Tan sólo poniendo la línea que he puesto, tendrás tu componente animado.

Puedes descargar el proyecto en components-animations-project, o bien obtenerlo en el repositori git.

Nunca fue tan fácil, aquí viene Angular2 (material y tutoriales), para hacer la vida más fácil del programador y del diseñador. Y todo gracias a la reutilización del trabajo de mucha gente que ha hecho Angular2 posible.

Ahora, cualquiera puede hacer su página web de forma sencilla y fácil. ¡Sólo con un par de conocimientos!

¡Anímate a animar!

Anuncios