Animate.css and Angular 4

Question

I've poked around a bit, and it seems that there really is no straightforward way to get the Animate.css animations working in Angular. Meaning, the animations would essentially need to be stripped out of the Animate.css library and translated into Angular animations.

Is there something I'm missing, or any resources I've missed on this topic? Otherwise, are there other animation libraries that will work out of the box with Angular 4?

Answer 1

As a result of Hacktoberfest this year, I've stripped out all animations from Animate.css and created an Angular Library that does everything that animate.css do with the possibility of using dynamic parameters. It supports both AOT and JIT compilations.

You can have a look at my demo here: https://filipows.github.io/angular-animations/ and let me know what do you think.

Here is a Stackblitz to play with: https://stackblitz.com/edit/angular-animations-lib-demo

Basically, you can trigger them with a boolean value:

<div [@bounce]="booleanValue"> </div>

Or when the element enters or leaves the DOM:

<div [@fadeInDownOnEnter] [@fadeOutOnLeave]> </div>

And it can be parameterized from the template:

<div [@fadeInDownOnEnter]="{ value: '', params: { duration: 300, delay: 0, translate: '30px' } }" </div>

The only thing you need to do is to import the animation in your component file and add it to animations in a component decorator:

@Component({
  ...
  animations: [
    fadeInDownOnEnterAnimation()
  ]
})

You can also use parameters in there, but these cannot be changed dynamically like the one inside a template:

@Component({
  ...
  animations: [
    fadeInDownOnEnterAnimation({ anchor: 'customAnchor', duration: 300, delay: 0, translate: '3000px' })
  ]
})