css - Angular 1.3.3 - ngAnimate 1.3.3 不添加类

Question

我有一个正在尝试制作动画的应用程序，但我似乎无法弄清楚为什么没有添加类。我在页面上包含了脚本，添加了 ngAnimate 依赖项(它允许我注入(inject) $animate 所以我认为这是一个很好的检查，看看它是否真的加载了？)。我的设置相当简单，这让我更加沮丧，因为它不起作用。我正在尝试为 ng-repeat 设置动画。

为了使帖子简短，我从关键帧中省略了供应商前缀，但我的 less 文件中确实有它们。当我检查 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