angularjs – 在ng-repeat动画之前将Angular ng-class应用于$app

发布时间：2020-12-17 17:13:07 所属栏目：安全来源：网络整理

导读：我有一个动画,根据点击的按钮,向左或向右动画ng-repeat中的元素. 在一个操作中,我设置一个ng-class(动画类),然后删除触发动画的元素,但是在动画应用之前它似乎没有识别出对ng-class的更改,除非我使用一个$scope.$apply(),但这会引发一个$apply已经在进行中的

我有一个动画,根据点击的按钮,向左或向右动画ng-repeat中的元素.

在一个操作中,我设置一个ng-class(动画类),然后删除触发动画的元素,但是在动画应用之前它似乎没有识别出对ng-class的更改,除非我使用一个$scope.$apply(),但这会引发一个$apply已经在进行中的错误.有没有办法不必使用$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: ''}
];

$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中删除这些元素.此外,您可能已经注意到,如果您对动画进行硬编码,则动画会按预期发生,例如set class =“left”或class =“right”.

要使ngAnimation像您期望的那样实现$animate服务,并且浏览器需要您想要设置动画的信息.但是只有在DOM操作发生时,浏览器和$animate服务才知道这些信息.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!