angularjs - ng-animate 没有按预期工作

Question

我正在尝试制作将新列表项插入列表的过程的动画。

按照 http://www.nganimate.org/ 中的说明进行操作

第一步:我建立一个基类

.animate-enter {
  -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition:  400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
      opacity: 0;   
}

第二步:为最终状态建立一个类

.animate-enter.animate-enter-active {
    opacity: 1;
}

但是，这似乎没有任何动画效果。

请戳这里:

http://plnkr.co/edit/lpMdhRpQjf5QlNtfb5dn?p=preview

Answer 1

问题是 ng-animate 内置于 1.1.5 中，但不是您使用的版本，即 1.3。如果您使用此版本使用脚本标记(例如 //code.angularjs.org/X.Y.Z/angular-animate.js)，则必须下载或引用 ngAnimate 作为单独的模块. See Here

但是here's一个使用 angular 1.1.5 的代码的 plunker，我添加了一个搜索过滤器以更好地显示动画。我相信您在定义动画类后也缺少一个括号。

此外，您在 transition 中有不透明度，函数之前的 css 中没有前缀，函数之后的 all 也没有。但这似乎是一个错字:

.animate-enter {
  -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ;
  -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ;
  -ms-transition 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ;
  -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ;
  transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) opacity ;
    opacity: 0;
}