且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

ng-repeat 动画不起作用

更新时间:2023-07-18 14:05:28

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. 当您在数组中移动元素时,您不应该使用 enterleave,而是使用 移动:.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=预览