Angular 1.3.3 - ngAnimate 1.3.3不添加类

时间:2014-11-20 21:31:32

标签: css angularjs animation ng-animate

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

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

Installation of ngAnimate Module not working

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

}());

1 个答案:

答案 0 :(得分:0)

这对你有用吗?

的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