Solución:
Como resultado del Hacktoberfest de este año, eliminé todas las animaciones de Animate.css y creó una biblioteca angular que hace todo lo que hace animate.css con la posibilidad de usar parámetros dinámicos. Es compatible con compilaciones AOT y JIT.
Puedes echar un vistazo a mi demostración aquí: https://filipows.github.io/angular-animations/ y déjame saber qué piensas.
Aquí hay un Stackblitz para jugar: https://stackblitz.com/edit/angular-animations-lib-demo
Básicamente, puede activarlos con un valor booleano:
<div [@bounce]="booleanValue"> </div>
O cuando el elemento entra o sale del DOM:
<div [@fadeInDownOnEnter] [@fadeOutOnLeave]> </div>
Y se puede parametrizar desde la plantilla:
<div [@fadeInDownOnEnter]="{ value: '', params: { duration: 300, delay: 0, translate: '30px' } }" </div>
Lo único que debe hacer es importar la animación en su archivo de componente y agregarla a las animaciones en un decorador de componentes:
@Component({
...
animations: [
fadeInDownOnEnterAnimation()
]
})
También puede usar parámetros allí, pero estos no se pueden cambiar dinámicamente como el que está dentro de una plantilla:
@Component({
...
animations: [
fadeInDownOnEnterAnimation({ anchor: 'customAnchor', duration: 300, delay: 0, translate: '3000px' })
]
})
- Instalar animate.css a través de npm
npm install animate.css --save - En su .angular-cli.json agregue
"../node_modules/animate.css/animate.css",– o si está usando Angular 6+, en su o angular.json agregue"node_modules/animate.css/animate.css",– en tu"styles"matriz (ver ejemplos a continuación). - Reinicie su servidor local y actualice su navegador.
ng serve
Ejemplo de Angular 4 y 5:
"styles": [
"../node_modules/animate.css/animate.css"
],
Ejemplo de Angular 6+:
"styles": [
"node_modules/animate.css/animate.css"
],
Instale animate.css a través de npm –
npm install animate.css --save
Luego, agregue angular-cli.json por
"../node_modules/animate.css/animate.min.css"
Y por último,
@import '~animate.css/animate.min.css';