ng-repeat 动画不起作用 [英] ng-repeat animation not working
问题描述
我的 ng-repeat 动画似乎不起作用.这是 plunkr
My animation with ng-repeat does not seem to work . Here is the plunkr
http://plnkr.co/edit/kYtzM9d0rzGmrniybz9c?p=preview
任何输入.
推荐答案
1. 您已经注册了两个模块:
1. You have registered two modules:
<html ng-app="plunker">
还有:
<body ng-app="testApp">
从 html 标签中删除 ng-app.
Remove ng-app from the html tag.
2.你需要加载angular-animate.js
3. 当您在数组中移动元素时，您不应该使用 enter 或 leave，而是使用 移动:.ng-move {
3. As you are moving the elements within the array, it's neither enter or leave you should use, but instead move: .ng-move {
4. 您正在使用 ng-animate 指令 (ng-animate="'animate'")，该指令自 1.2 起已弃用.您还向它传递了一个不存在的类.
4. You are using the ng-animate directive (ng-animate="'animate'") which is deprecated since 1.2. You are also passing it a class that does not exist.
这行得通:
.ng-move {
transition: 1.75s;
opacity: 0;
}
.ng-move.ng-move-active {
opacity: 1;
}
但我建议给它一个特定的类，以便能够指定哪个 ng-repeat 使用哪个动画:
But I would recommend giving it a specific class to be able to specify which ng-repeat uses which animation:
.move-animation.ng-move {
transition: 1.75s;
opacity: 0;
}
.move-animation.ng-move.ng-move-active {
opacity: 1;
}
还有:
<td class="move-animation" ng-repeat="cust in customers" ng-click="swap(this.$index)">
演示: http://plnkr.co/edit/fiMORm5ZFLejV1aOURbR?p=预览
这篇关于ng-repeat 动画不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
