ng-animate不按预期方式工作

我正在尝试动画化将新列表项插入列表的过程。ng-animate不按预期方式工作

继http://www.nganimate.org/

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

然而，这并不似乎在动画什么。

Plnkr这里：

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

来源

2015-06-12 runtimeZero

的问题是，NG-动画内置到1.1.5，而不是你正在使用的版本，这是1.3。如果您使用此版本使用脚本标记（如//code.angularjs.org/X.Y.Z/angular-animate.js），则必须将ngAnimate作为单独模块下载或引用。 See Here

但是here's与您的代码使用角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; 
}

来源

2015-06-12 20:55:34

除了包括角animate.js脚本到你的页面，你需要如下注入参考ngAnimate：

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

来源

2015-06-12 22:12:33 VictorR

ng-animate不按预期方式工作

回答

相关问题