angularJS ng-animate with animate.css - css

Question

How do I get ng-animate to work with animate.css on simple html elements like images paragraphs or divs?
In a static page I just include the animate.css and wow.js libraries and add a couple classes to the element I want to animate. But I have been unsuccessful in getting it to work inside ng-view.
<img class="wow fadeInLeft" src="http://images.ximo365.com/nick-olsen-pose.jpg" alt="Nick Olsen On-the-go shots">

Answer 1

In Angular 1.2+, you don't need to declare the ng-animate directive in your application module. Animations can be added with pure CSS.
First, you need to include the angular-animate library in addition to angular:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular-animate.js"></script>
You need to set the conditions for ng-animate on your element.
For your image elements:
<img src='../img/img1.jpg' ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" class=">
You also need to include the CSS for the actions you want, so for your example:
.animate-enter,
.animate-leave
{
-webkit-transition: fadeInLeft 1s;
position: relative;
display: block;
// Etc.
}
The animate will fire when the element enters. If you want to load it on page load, that will take more work. If you want to load it when the element is shown, you should use something like ng-repeat, so that when the item is displayed, it will fade-in.
See the nganimate.org docs