Angular 1.3.3 - ngAnimate 1.3.3不添加类

Question

我有一个应用程序，我试图动画，但我似乎无法弄清楚为什么不添加类。我在页面上包含脚本，添加了ngAnimate依赖项（它允许我注入$ animate，所以我认为这是一个很好的检查，看它是否实际加载？）。我的设置非常简单，这使得它无法工作更令人沮丧。我正在尝试制作一个ng-repeat动画。

为了保持文章简洁，我忽略了关键帧中的供应商前缀，但我确实将它们放在了我的较少文件中。当我检查chrome中的元素并手动添加ng-leave作为类时，它应该进行动画处理，所以我非常确定我的动画没问题，只是ngAnimate不像我期望的那样添加类。我可能会在我的css文件中丢失一些东西。我发现我的困惑最接近的是此链接：

Installation of ngAnimate Module not working

它指出，ngAnimate将不添加类，除非你不设置具体的CSS规则。我很困惑我的& .ng-leave是否足以让ngAnimate选择它，还是我需要添加更多？如果这很重要，我的ng-repeat也在一个指令模板中。一切都在页面上呈现，没有动画触发器。

我花了最后几个小时查看任何与此问题有关的人的远程相关链接，并尝试了我发现的所有内容，但没有任何结果能够正常工作。代码如下

//css 
@keyframes rollOut { 
    from { 
    opacity: 1; 
    } 
    to { 
    opacity: 0; 
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -moz-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -o-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    } 
} 
.roll-out.ng-leave { 
    -webkit-animation: rollOut 5s linear; 
    -moz-animation: rollOut 5s linear; 
    -o-animation: rollOut 5s linear; 
    animation: rollOut 5s linear; 
} 

//html 
<div ng-repeat="item in list track by $index" class="roll-out"> 
     <div>{{ item }}</div> 
</div> 


//app.js (loaded correctly?) 
(function() { 
    'use strict'; 

    var modules = ['core', 'gui', 'etc']; 
    var submodules = ['filter', 'service', 'directive']; 
    var libmodules = ['ui.bootstrap', 'ngAnimate']; 

    modules.forEach(function(module) { 
     submodules.forEach(function(sub) { 
      angular.module(module + '.' + sub, []); 
     }); 
     angular.module(module, submodules.map(function(a) { return module + '.' + a; })); 
    }); 

    angular.module('myApp', modules.concat(libmodules)); 

}()); 

Answer 1

这是否适合您？

CSS：

.roll-out.ng-leave { 
    opacity: 1; 
    transition: all 5s linear; 
} 

.roll-out.ng-leave.ng-leave-active { 
    opacity: 0; 
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -moz-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    -o-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 
} 

HTML：

<div ng-repeat="item in list track by $index" class="roll-out"> 
     <div>{{ item }}</div> 
</div 

plunker