Animaciones en Angular 4: SlideUp, SlideDown
Animaciones en Angular 4: SlideUp, SlideDown


En este tutorial vamos a ver lo sencillo que es crear animaciones en Angular 4, en nuestro caso vamos a crear un sencillo botón, cuando pulsemos en él, si cierto contenido se está mostrando se ocultará y viceversa, de esta forma tendremos una buena base para entender cómo funcionan las animaciones en Angular 4.

Lo primero que debemos hacer es registrar BrowserAnimationsModule en nuestro módulo.

A continuación, vamos a crear un componente que podamos reutilizar y vamos a añadir el siguiente código, el cual tendrá una animación llamada visibility.

Simplemente definimos animations, le damos el nombre visibility y establecemos los estados y las transiciones de activo a inactivo y viceversa, cómo puedes ver es muy simple, ahora vamos a abrir el archivo show-more.html y vamos a añadir lo siguiente.

Sólo por añadir [@visibility]=”status”, Angular ya sabe qué debe hacer con este componente, finalmente, para poder utilizar este componente en cualquier sitio, sólo debemos añadir lo siguiente dónde necesitemos.

Y de esta forma tan sencilla tenemos funcionando las animaciones en Angular 4, en este caso animaciones SlideUp y SlideDow, pero cómo puedes ver, crear las tuyas propias es muy simple.