Book Image

Learning AngularJS Animations

By : Richard Keller
Book Image

Learning AngularJS Animations

By: Richard Keller

Overview of this book

Table of Contents (15 chapters)
Learning AngularJS Animations
About the Author
About the Reviewers

AngularJS animation with CSS keyframe animations

We created an animation using the ngIf directive and CSS transitions. Now we are going to create an animation using ngRepeat and CSS animations (keyframes).

As we saw in the earlier table on directives and the supported animation events, the ngRepeat directive supports animation on the enter, leave, and move events. We already used the enter and leave events in the last sample. The move event is triggered when an item is moved around on the list of items.

For this sample, we will create three functions on the controller scope: one to add elements to the list in order to execute the enter event, one to remove an item from the list in order to execute the leave event, and one to sort the elements so that we can see the move event.

Here is the JavaScript with the functions; $scope.items is the array that we will use on the ngRepeat directive:

var app = angular.module('myApp', ['ngAnimate']);
   app.controller('animationsCtrl', function ($scope) ...