Angular ng-Animate не работает после 1.26

Я использую class="animationName" вместо ng-animate, поскольку оно изменилось с 1.2. Однако я не могу заставить работать нижеприведенное. Что мне не хватает?

CSS:

 .move-animation.ng-move {
    -webkit-transition:all linear 1s;
    -moz-transition:all linear 1s;
    -ms-transition:all linear 1s;
    -o-transition:all linear 1s;
    transition:all linear 1s;
     max-height: 0;
    opacity:0;
}
  .move-animation.ng-move.ng-move-active {
    max-height: 250px;
    opacity:1;
}

HTML:

    <div ngApp="MyApp">
    <div ng-controller="App">
        <button ng-click="add()">Add</button>
        <ul>
            <li class="move-animation" ng-click="remove($index)" ng-repeat="name in names">{{name}}</li>
        </ul>
    </div>
</div>

контроллер:

angular.module('MyApp', []);

function App($scope) {
    $scope.names = [];
    var data = [];
    for (var i = 0; i < 100; i++) {
        data.push('item' + i)
    }
    $scope.add = function () {
        if (data.length) $scope.names.splice(0, 0, data.pop());
    };
    $scope.remove = function (index) {
        $scope.names.splice(index, 1);
    };
}

Это с 1.26: http://jsfiddle.net/6t42M/178/ Вот такая же старая скрипка, с 1.1. Это работает: http://jsfiddle.net/6t42M/100/

1 ответ

Решение

Рабочая скрипка, 1.4.2.

JS:

    angular.module('MyApp', ['ngAnimate'])
.controller('AppController', ['$scope', function ($scope) {
    $scope.names = [];
    var data = [];
    for (var i = 0; i < 100; i++) {
        data.push('item' + i)
    }   
    $scope.add = function () {
        if (data.length) $scope.names.splice(0, 0, data.pop());
    };
}]);

HTML:

<div ngApp="MyApp">
    <div ng-controller="AppController">

        <button ng-click="add()">Add</button>
        <ul>
            <li class="fadeLine" ng-repeat="name in names">{{name}}</li>
        </ul>
    </div>
</div>

CSS:

 .fadeLine.ng-enter {
    transition:0.5s linear all;
      opacity:0;
}
  .fadeLine.ng-enter-active {
        opacity:1;
}
Другие вопросы по тегам