angularjs - ng-repeat 动画不起作用

标签 angularjs angularjs-ng-repeat ng-repeat

我的 ng-repeat 动画似乎不起作用。这里是笨蛋

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

任何输入。

最佳答案

1.您已经注册了两个模块:

<html ng-app="plunker">

还有:

<body ng-app="testApp">

从 html 标签中移除 ng-app

2.你需要加载angular-animate.js

3. 当您在数组中移动元素时,您应该使用的不是 enterleave,而是 移动:.ng-move {

4. 您正在使用自 1.2 起已弃用的 ng-animate 指令 (ng-animate="'animate'") .您还向它传递了一个不存在的类。

这可行:

.ng-move {
  transition: 1.75s;
  opacity: 0;
}
.ng-move.ng-move-active {
  opacity: 1;
}

但我建议给它一个特定的类,以便能够指定哪个 ng-repeat 使用哪个动画:

.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=preview

关于angularjs - ng-repeat 动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23465253/

相关文章:

javascript - AngularJs:选择下拉列表在使用 ng-repeat 时不显示任何选项

javascript - AngularJS 将 ng-repeat 值传递给 ng-click

javascript - ng-repeat 中带有字母表的项目符号列表

javascript - 双向绑定(bind)不适用于 ng-repeat

javascript - AngularJS 中的 HTTPS 'GET'

JavaScript 函数到 AngularJS

javascript - 渲染后如何执行指令代码?

javascript - ng-repeat 中缺少的元素

javascript - 使用 Angular 进行简单的 API 调用时遇到问题

javascript - 在 Angular 指令中获取原始嵌入的内容