动态更改enter/leave动画class名称

Question

我有 ng-repeat，我想根据来自控制器 (vm) 的变量更改 enter/leave 动画。我找到了这个 (http://www.nganimate.org/)，但它适用于 angular 1.1.5，而我使用的是 1.5。我怎样才能做到这一点？谢谢！

Answer 1

只需按照您的风格 sheet 创建一些动画类，然后根据您喜欢的 vm 中的任何变量通过 ng-class 切换它们。下面可能是您的标记：

<ul>
  <li ng-repeat="item in vm.items track by item.id"
      ng-class="{
        'animation-1-class': vm.varOfYourChoice,
        'animation-2-class': !vm.varOfYourChoice
      }"
  ></li>
</ul>

还有你的风格sheet:

.animation-1-class.ng-enter,
.animation-1-class.ng-leave.ng-leave-active { ... }

.animation-1-class.ng-leave,
.animation-1-class.ng-enter.ng-enter-active { ... }

.animation-2-class.ng-enter,
.animation-2-class.ng-leave.ng-leave-active { ... }

.animation-2-class.ng-leave,
.animation-2-class.ng-enter.ng-enter-active { ... }

并且 here 是有关 angular 动画的相关文档，适用于您正在使用的 AngularJs 版本。

Answer 2

问题是，如果我创建与 animation.css 同名的 css，animation.css 总是会接管，所以我只需在 [=15= 中添加一个前缀]，它解决了这个问题。

动态更改enter/leave动画class名称

Dynamically change enter/leave animation class name

angularjs

angularjs-directive

angularjs-ng-repeat

angular-animations