我正在尝试制作将新列表项插入列表的过程的动画。
按照 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;
}
但是,这似乎没有任何动画效果。
请戳这里:
最佳答案
问题是 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;
}
关于angularjs - ng-animate 没有按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30811718/