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...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning AngularJS Animations

By : Keller

Learning AngularJS Animations

By: Keller

Overview of this book

AngularJS animation with CSS keyframe animations

Learning AngularJS Animations

By : Keller

Learning AngularJS Animations

By: Keller

Overview of this book

AngularJS animation with CSS keyframe animations

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access