动画 ng-repeat 没有 ng-animate

Posted 2023-03-06

【中文标题】动画 ng-repeat 没有 ng-animate

【英文标题】：Animate ng-repeat without ng-animate

【发布时间】：2017-02-15 00:13:36

【问题描述】：

当绑定到 ng-repeat 的模型数组的顺序在没有 ng-animate 的情况下使用纯 css 更改时，有没有办法为过渡设置动画？

【问题讨论】：

其实我昨天自己也在寻找这样的实现，还没有找到，所以我想看看类似的东西

当然可以，但实施它并不值得。我会选择 ngAnimate。

【参考方案1】：

是的，这是可能的。您只需要人为地更改分配给 ng-repeat 中元素的 CSS 类即可触发动画。

例如，在您的 ng-repeat 中，从范围变量中动态分配类，并在重新排序 ng-repeat 时更改该变量中的值：

<li class="animate_fadein_currentClass" data-ng-repeat="user in data_set | orderBy:dynamicOrder:order.reverse"><span>user.name $index</span></li>

这是我从创建的 ng-repeat orderby 示例中分出的小提琴： https://jsfiddle.net/meliax/dvgghvch/