angularjs - 动态改变进入/离开动画类名

Question

我有 ng-repeat，我想根据控制器（vm）中的变量更改进入/离开动画。我找到了这个（http://www.nganimate.org/），但它适用于 angular 1.1.5，我使用的是 1.5。我怎样才能做到这一点？谢谢！

Answer 1

The problem was that if I create css with the same name as animation.css, the animation.css always take over, so I just add a prefix to my class, and its fixed the problem.

Answer 2

只需在您的样式表中创建一些动画类，然后ng-class根据vm您喜欢的任何变量来切换它们。下面可能是您的标记：

<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>

还有你的样式表：

.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 { ... }

这里是有关您正在使用的 AngularJs 版本的角度动画的相关文档。