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

Question

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

我missing/doing哪里错了？

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

Answer 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

或者，如果您想按照自己的方式进行操作，只需为指令元素添加一个 class 即。 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

Answer 2

你可以使用 replace 属性:

app.directive('animationTest', animationTest);

function animationTest(){

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

或添加css:

.animate-repeat {
  display:block;
}

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

ngAnimate - Animation not triggered on repeated custom directive

css

animation

angularjs

angularjs-directive

ng-animate