Why classes ng-leave / ng-enter are not added

Question

as per angular docs https://docs.angularjs.org/api/ng/directive/ngRepeat#animations

". enter - when a new item is added to the list or when the item after the filter

.leave - when an item is removed from the list or when the item is filtered out "

but when I .push ({}) or .splice (-1, 1) from the array, none of these classes are added to ng-repeat. what is the problem?

<div ng-controller="MyCtrl"> <button ng-click="addLine()"> add </button> <button ng-click="removeLine()"> remove </button> <div ng-repeat="line in lines"> <div class="preview">{{$index}}</div> </div> </div> var myApp = angular.module('myApp', ['ngAnimate']); //myApp.directive('myDirective', function() {}); //myApp.factory('myService', function() {}); function MyCtrl($scope) { $scope.addLine = function(){ $scope.lines.push({}) } $scope.removeLine = function(){ $scope.lines.splice(-1, 1) } $scope.lines = [{ text: 'res1'}, { text: 'res2'}]; } 

as Ted noted in his answer, actual css styles are required for .ng-enter / .ng-leave, otherwise the ngAnimate module will not add .ng-enter classes to the DOM elements.

To be more clear, I don’t need to do animation now. The problem for me here is that the .ng-enter classes do not actually apply to the element's class attribute unless you have css styles for .ng-enter

WORK PLANKER http://plnkr.co/edit/TqpdIy6syikBhAeb5Kw3?p=preview

Answer 1

To add these classes, you need to load the animation module into the application.

Refer to the ngAnimate docs for how to do this.

First you must download the extension module .js file:

 <script src="angular.js"> <script src="angular-animate.js"> 

Then list it as the dependent module of your application:

 angular.module('app', ['ngAnimate']); 

The ngAnimate module also requires the element to have its transition defined in CSS or JS:

For CSS transitions, the transition code must be defined at the beginning of the CSS class (in this case .ng-enter). The target class is what the transition will bring to life.

If you add something like:

 /* The starting CSS styles for the enter animation */ .fade.ng-enter { transition:0.5s linear all; opacity:0; } /* The finishing CSS styles for the enter animation */ .fade.ng-enter.ng-enter-active { opacity:1; } 

He should start working.

To be extremely clear, since the documents do not say this explicitly: if the animation is not defined either in CSS or in JS, the ngAnimate module will not even add classes, it will simply skip the animation together.