Angularjs ng动画未按预期工作

我正在尝试设置将新列表项插入列表的过程的动画

按照

步骤1：我建立一个基类

.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;
}

然而，这似乎没有任何动画效果

请点击此处：

---

问题在于ng animate内置于1.1.5中，而不是您正在使用的版本，即1.3。如果使用脚本标记（如

//code.angularjs.org/X.Y.Z/angular animate.js

）将ngAnimate用于此版本，则必须将ngAnimate作为单独的模块下载或引用

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

此外，在函数之前的css中没有前缀的

transtition

中以及函数之后的

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

---

除了将angular-animate.js脚本包含到页面中外，还需要按如下方式注入对ngAnimate的引用：

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