在 ng-repeat 动画之前让 Angular ng-class 到 $apply

Question

我有一个动画，它根据单击的按钮将 ng-repeat 中的元素向左或向右移动。

在一次操作中，我设置了一个 ng-class（动画类），然后删除了触发动画的元素，但在应用动画之前它似乎无法识别对 ng-class 的更改，除非我使用$scope.$apply()，但这会引发$apply already in progress 错误。有没有办法不必使用$scope.$apply()，或者摆脱那个错误？

这是工作小提琴（有错误）。 http://jsfiddle.net/noducks/6pFr2/

HTML

<div ng-controller="MyCtrl" style="text-align: center">
<div ng-repeat="elem in elements" ng-class="elem.anim">
   <button ng-click="out(elem, 'left', $index)">Left</button>
   <button ng-click="out(elem, 'right', $index)">Right</button>
</div>
</div>

Javascript

var myApp = angular.module('myApp',['ngAnimate']);

function MyCtrl($scope) {
$scope.elements = [
    {anim: ''},
    {anim: ''},
    {anim: ''},
    {anim: ''},
    {anim: ''}
];

$scope.out = function(elem, direc, index) {
    elem.anim = direc;
    $scope.$apply();
    $scope.elements.splice(index, 1);
};
}

CSS

.left.ng-leave {
  -webkit-transition:all linear 1s;
  transition:all linear 1s;
}

.left.ng-leave.ng-leave-active{
    -ms-transform: translateX(-100%); 
    -o-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.left.ng-leave {
  -ms-transform: translateX(0%); 
  -o-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.right.ng-leave {
    -webkit-transition:all linear 1s;
    transition:all linear 1s;
}

.right.ng-leave.ng-leave-active {
    -ms-transform: translateX(100%); 
    -o-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.right.ng-leave {
    -ms-transform: translateX(0%); 
    -o-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

Answer 1

问题是如果从 DOM 中删除重复的元素，则它们没有任何 css 动画信息。我猜您已经注意到，如果您删除了 $apply 调用，这些元素会立即从 DOM 中删除。此外，您可能已经注意到，如果您对动画进行硬编码，动画会按预期发生，例如设置class="left" 或class="right"。

要使ngAnimation 像您期望的那样发生$animate 服务和，浏览器需要您尝试制作动画的信息。但这些信息只有在 DOM 操作发生时才会为浏览器和 $animate 服务所知。

如何解决这个问题：在 DOM 更新 css 类后，您需要对 $scope.elements 进行更改。因此，您需要延迟一个摘要循环的 DOM 操作。这可以通过$timeout 服务来完成（请参阅此答案以获取更多信息AngularJS : $evalAsync vs $timeout）：

$scope.out = function(elem, direc, index) {
    elem.anim = direc;
    $timeout(function(){
       $scope.elements.splice(index, 1);
    });
};