ng-animate 未按预期工作答案

【问题标题】：ng-animate not working as intendedng-animate 未按预期工作
【发布时间】：2015-06-13 06:12:33
【问题描述】：

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

按照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;   
}

第 2 步：为最终状态建立一个类

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

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

Plnkr 在这里：

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

【问题讨论】：

标签： angularjs css

【解决方案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 的代码的笨蛋，我添加了一个搜索过滤器以更好地显示动画。我相信您在定义动画类后也缺少括号。

此外，transtition 中的不透明度在函数之前的 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;
}

【讨论】：

【解决方案2】：

除了将 angular-animate.js 脚本包含到您的页面之外，您还需要注入对 ngAnimate 的引用，如下所示：

var app = angular.module('myApp', ['ngAnimate']);

【讨论】：