Question

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

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

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>

你的指示是：</ p>

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

Answer 2

您可以使用replace属性：

app.directive('animationTest', animationTest);

function animationTest(){

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

或添加css：

.animate-repeat {
  display:block;
}

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

2 个答案: