Question

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

为了保持帖子简短，我从关键帧中省略了供应商前缀，但我确实将它们放在我的文件中。当我检查chrome中的元素并手动添加ng-leave作为一个类时，它会动画它应该动画，所以我非常确定我的动画很好，只是ngAnimate没有像我期望的那样添加类。我可能在我的css文件中遗漏了一些东西。我能找到的最让我感到困惑的是这个链接：

Installation of ngAnimate Module not working

它声明除非您没有设置特定的CSS规则，否则ngAnimate不会添加类。我很困惑我的＆amp; .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

Angular 1.3.3 - ngAnimate 1.3.3不添加类

1 个答案: