Angularjs 在ng重复动画之前将Angular ng类设置为$apply

我有一个动画，根据单击的按钮，在ng中向左或向右重复设置元素的动画

在一次操作中，我设置了一个ng类（动画类），然后删除了触发动画的元素，但在应用动画之前，它似乎无法识别对ng类的更改，除非我使用

$scope.$apply（）

，但这会引发一个

$apply已在进行中的
错误。有没有办法不必使用
$scope.$apply（）
，或者消除该错误

这是工作小提琴（有错误）

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>

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

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

要使
ngAnimation
按您所期望的那样执行
$animate
服务和，浏览器需要您尝试设置动画的信息。但是，只有在DOM操作发生时，浏览器和
$animate
服务才知道这些信息

解决方法：在DOM中更新css类后，需要对
$scope.elements
进行更改。因此，需要将DOM操作延迟一个摘要循环。这可以通过
$timeout
服务完成（有关更多信息，请参阅此答案）：

谢谢你，迈克尔。我本来希望不用暂停。话虽如此，我已尝试集成您的解决方案，但元素似乎不再具有动画效果。有什么想法吗？@noducks您需要在控制器中包含$timeout:function MyCtrl（$scope，$timeout）
.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%);
}

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