Question

我正在尝试使用角度v1.2.16中的ng-animate而不是v1.1.4（用于小提琴）重新创建以下过渡。

如果将小提琴中的角度lib更新为1.2.16，则转换不再起作用。为什么他们不再工作？链接到小提琴http://jsfiddle.net/angularjs_de/dxQqm/

HTML

 <li ng-repeat="item in items" ng-animate="'repeat'">{{item}}</li>

CSS

.repeat-enter-setup, .repeat-leave-setup {
  -webkit-transition:all linear 0.3s;
  -moz-transition:all linear 0.3s;
  -ms-transition:all linear 0.3s;
  -o-transition:all linear 0.3s;
  transition:all linear 0.3s;
}

.repeat-enter-setup { opacity:0; }
.repeat-enter-setup.repeat-enter-start {  opacity:1; }

.repeat-leave-setup { opacity:1;  }
.repeat-leave-setup.repeat-leave-start { opacity:0; }

Answer 1

Angular改变了动画在1.2+中的工作方式。动画现在是一个需要添加的独立模块。

这里有1.2+动画的非常好的指南：

http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

编辑：在该链接中，他们还讨论了从1.1.5到1.2的变化，它将帮助您了解变化。

var app = angular.module('myApp', ['ngAnimate']);
app.controller('MainController', ['$scope', function ($scope) {
  $scope.items = [1,2,3,4,5,6,7,8,9];

  $scope.replaceItem = function() {
    $scope.items.shift();
    $scope.items.push(Math.floor(Math.random()*1000000000));
  };    
}]);

小提琴中的解决方案：http://jsfiddle.net/dxQqm/166

使用ng-animate的过渡在1.2.16中不起作用

1 个答案: