ngAnimate - 在重複的自定義指令中未觸發動畫

Question

我想在使用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; 
} 

Answer 1

您可以簡單地d綁定對<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; 
} 

Answer 2

你可以使用replace屬性：

app.directive('animationTest', animationTest); 

function animationTest(){ 

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

個

或添加CSS：

.animate-repeat { 
    display:block; 
}