在ng-repeat动画之前将Angular ng-class应用于$ apply [英] Getting Angular ng-class to $apply before an ng-repeat animation

问题描述

我有一个动画，该动画根据单击哪个按钮在左侧或右侧对ng-repeat中的元素进行动画处理.

I have an animation that animates an element in an ng-repeat to the left or right depending on which button is clicked.

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

In one manoeuvre, I set a ng-class (the animation class) and then remove the element, which triggers the animation, but it doesn't seem to recognise the change to the ng-class before the animation is applied, unless I use a $scope.$apply(), but this throws up a $apply already in progress error. Is there a way to not have to use the $scope.$apply(), or to get rid of that error?

这是工作中的小提琴(有错误). http://jsfiddle.net/noducks/6pFr2/

Here is the working fiddle (with errors). 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%);
}

推荐答案

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

The problem is that your repeated elements do not have any css animation information if they are removed from the DOM. I guess you have noticed that the elements are immediately removed from the DOM if you remove the $apply call. Also you may have noticed that the animation happens as expected if you hardcode the animation e.g. set class="left" or class="right".

要使ngAnimation像您期望的$animate服务一样发生，并且，浏览器需要您要制作动画的信息.但是，只有在进行DOM操作后，浏览器和$animate服务才知道这些信息.

To make the ngAnimation happen as you expect the $animate service and the browser need the information what you are trying to animate. But these informations are known to the browser and the $animate service only when the DOM manipulations has taken place.

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

How to solve this: you need to make the changes to the $scope.elements after the css class is updated at the DOM. So you need to delay the DOM manipulation for one digest loop. This can be done by the $timeout service (please see this answer for more information AngularJS : $evalAsync vs $timeout):

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

这篇关于在ng-repeat动画之前将Angular ng-class应用于$ apply的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！