Question

我在带有变量的div中添加了一个动画类。

 <div class="{{ItemsChange}}"></div>

在我的控制器中：

$scope.addItem=function(item){
  $rootScope.ItemsChange=''
  $rootScope.ItemsChange='animated pulse'
 }

现在，我希望每次调用addItem时都应用此类，这正是我首先将空字符串添加到变量然后再添加动画类的原因，以便每次$ scope.addItem应用动画类'动画脉冲'被调用但动画类仅在第一次应用。

我该如何解决这个问题？

Answer 1

抱歉，我曾假设animate.css已针对Angular动画进行了优化，但它并非如此。要按照你的方式做事，只需在$ timeout内重置$ scope.ItemsChagne。因此，将$ timeout作为依赖项添加到控制器并使用

$scope.addItem = function(item) {
    $scope.ItemsChange = 'animated pulse';
    /**
     * each animation inside animate.css is one second, 
     * so give it an extra few milliseconds 
     */
    $timeout(function() {
        $scope.ItemsChange = false;
    }, 1100); 
});

它不是特别漂亮，但确实有效。

<强> 修改

尝试使用ngClass，如下所示：

ng-class="{animated: ItemsChange, pulse: ItemsChange}"

On plnkr

从控制器添加动画类到div

1 个答案: