according to the angular docs

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

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

yet, when I .push({}) or .splice(-1, 1) from an array, neither of those classes are added to the ng-repeat. what's 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, having actual css styles for .ng-enter / .ng-leave is required, otherwise the ngAnimate module will not add the .ng-enter classes to the DOM elements

To be more clear, I don't care about actually doing an animation right now. The issue for me here is that the .ng-enter classes don't actually get applied to the class attribute of an element unless you have css styles for .ng-enter

WORKING PLUNKER

according to the angular docs https://docs.angularjs/api/ng/directive/ngRepeat#animations

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

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

yet, when I .push({}) or .splice(-1, 1) from an array, neither of those classes are added to the ng-repeat. what's 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, having actual css styles for .ng-enter / .ng-leave is required, otherwise the ngAnimate module will not add the .ng-enter classes to the DOM elements

To be more clear, I don't care about actually doing an animation right now. The issue for me here is that the .ng-enter classes don't actually get applied to the class attribute of an element unless you have css styles for .ng-enter

WORKING PLUNKER http://plnkr.co/edit/TqpdIy6syikBhAeb5Kw3?p=preview

• javascript
• angularjs

Share Improve this question Follow edited Jan 14, 2016 at 18:28 trickpatty asked Jan 14, 2016 at 17:35 trickpattytrickpatty 43377 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

For these classes to be added you have to load the animation module in your app.

See the ngAnimate docs for how to do this.

First you must load the additional module's .js file:

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

Then list it as a dependent module of your application:

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

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

For CSS transitions, the transition code must be defined within the starting CSS class (in this case .ng-enter). The destination class is what the transition will animate towards.

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;
}

It should start working.

To be very clear, because the docs don't say this explicitly: If the animation is not defined in either the CSS or the JS, the ngAnimate module won't even add the classes, it will just skip the animation all together.