ngAnimate - 重复的自定义指令不会触发动画答案

【问题标题】：ngAnimate - Animation not triggered on repeated custom directivengAnimate - 重复的自定义指令不会触发动画
【发布时间】：2016-08-30 18:11:00
【问题描述】：

我想在使用 ng-repeat 重复的自定义指令上使用 ngAnimate。如果我在一个简单的 html 列表项上使用 ng-repeat，动画效果就很好。但是，只要用自定义指令元素替换列表项，就不会触发动画。

我错过了什么/做错了什么？

代码（Plunker Demo）：

HTML

<h3>Simple ng-repeat</h3>
<ul>
   <li class="animate-repeat" ng-repeat="val in testValues">{{ val }}</li>
</ul>

<h3>ng-repeat on custom directive</h3>
<ul >
    <animation-test class="animate-repeat" ng-repeat="val in testValues" test-val="val"></animation-test>
</ul>

Javascript

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

app.controller('mainController', [ '$scope', mainController]);

function mainController($scope){

      // just for demo purposes
  $scope.testValues = [];

  $scope.addItem = function(){
    var len = $scope.testValues.length;
    $scope.testValues.unshift('Value #' + len);
  };

  $scope.removeItem = function(){
     $scope.testValues.pop();
  };

}

app.directive('animationTest', animationTest);

function animationTest(){

  return {
    template: ' <li> {{testVal}} </li> ',
    scope: {
      testVal: '<'
    }
  };
}

CSS（使用animate.css）

.animate-repeat.ng-enter {
    animation: 0.5s slideInUp;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move {
    animation: 0.5s slideOutDown;

}



@-webkit-keyframes slideInUp {
from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
}

to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     }
}

@keyframes slideInUp {
from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
}

to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
}

@keyframes slideOutDown {
from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
}

【问题讨论】：

标签： css angularjs animation angularjs-directive ng-animate

【解决方案1】：

您可以简单地将指令绑定到<li> 元素，然后您的确切代码就会工作。因此，只需将指令的 HTML 更改为：

<li animation-test class="animate-repeat" ng-repeat="val in testValues" test-val="val"></li>

你的指令是：

app.directive('animationTest', animationTest);

  function animationTest(){

  return {
    template: '{{testVal}}',
    scope: {
      testVal: '<'
    }
  };
}

CodePen demo

或者，如果您想按照自己的方式进行操作，您只需为指令元素添加一个类，即。 directive-block 然后将动画设置为指令元素本身，如下所示：

HTML：

<animation-test class="directive-block" ng-repeat="val in testValues" test-val="val"></animation-test>

CSS：

.directive-block {
  display: block;
  animation: 0.5s slideInUp;
}

.directive-block.ng-leave-active {
  animation: 0.5s slideOutDown;
}

CodePen demo

【讨论】：

没问题。很高兴我能帮忙:)

【解决方案2】：

您可以使用replace 属性：

app.directive('animationTest', animationTest);

function animationTest(){

  return {
    template: ' <li> {{testVal}} </li> ',
    replace: true,
    scope: {
      testVal: '<'
    }
  };
}

或添加css：

.animate-repeat {
  display:block;
}

【讨论】：