AngularJS Essentials

This is quite a simple mechanism, but we need to pay careful attention in order to
understand it.
Chapter 2
Animating ngRepeat
The following code is a simple example where we will animate the enter event of
the ngRepeat directive:
app.css
.ng-enter {
-webkit-transition: all 5s linear;
-moz-transition: all 5s linear;
-ms-transition: all 5s linear;
-o-transition: all 5s linear;
transition: all 5s linear;
opacity: 0;
}
.ng-enter-active {
opacity: 1;
}
That's all! With this configuration in place, every time a new element is rendered
by an ngRepeat directive, it will respect the transition, appearing with a 5 second,
linear, fade-in effect from the opacity 0 to 1.
For the opposite concept, we can follow the same process. Let's create a fade-out
effect by means of the .ng-leave and .ng-leave-active classes:
app.css
.ng-leave {
-webkit-transition: all 5s linear;
-moz-transition: all 5s linear;
-ms-transition: all 5s linear;
-o-transition: all 5s linear;
transition: all 5s linear;
opacity: 1;
}
.ng-leave-active {
opacity: 0;
}
[ 49 ]
www.it-ebooks.info