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' })
  ]
})

Answer 2

1. Install animate.css via npm npm install animate.css --save
2. In your .angular-cli.json add in "../node_modules/animate.css/animate.css", - or if you're using Angular 6+, in your angular.json add in "node_modules/animate.css/animate.css", - into your "styles" array (see examples below).
3. Restart your local server and refresh your browser. ng serve

Angular 4 & 5 Example:

"styles": [
    "../node_modules/animate.css/animate.css"
  ],

Angular 6+ Example:

"styles": [
    "node_modules/animate.css/animate.css"
  ],

Answer 3

Install animate.css via npm -

npm install animate.css --save

Then, add in angular-cli.json by

"../node_modules/animate.css/animate.min.css"

And lastly,

@import '~animate.css/animate.min.css';

Answer 4

I was trying to make this css library work in Angular 4 and found a solution. Don't install it via npm, just add the cdn link of Animate.css to the index.html file and then add the corresponding classes to your elements. Works for me.

Edit: This is your index.html

<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

And this is an example of it working with Bootstrap:

<li class="col-sm-12 col-md-12 col-lg-4 animated slideInUp">