javascript - 为不正确的类触发的动画

Question

我有两个类，class1 和 class2。我用 .class2-add 将 class2 绑定(bind)到动画。但是在下面的示例中，切换任一类都会触发动画。给了什么？

http://plnkr.co/edit/V1bf0waCnUWCt58F3Y63

我不希望在切换 class1 时触发动画。

Answer 1

根据 ngClass

When the expression changes, the previously added classes are removed and only then the new classes are added.

这意味着类被删除并重新添加回您的指令，这就是它重新触发您的 .class2-add

的原因

根据您的实际用例，据我所知没有直接的解决方法。

据我所知，使用 CSS 是一种补救措施:

.class1-add.class2-add {
  -webkit-transition:none;
  -moz-transition:none;
  -o-transition:none;
  transition:none;
  background-color: #fff;
}

当它们同时存在时取消动画。

或者

ng-class="{class1: class1, class2: class2 && !class1}"

但是，当您的 .class1 被删除并且 .class2 当前处于事件状态时，这两种方法仍会触发您的 .class2-add (TRUE) .

综上所述，-add 将在 ng-class 收到更改时重新触发。

链接:http://plnkr.co/edit/bFhKyNZBi5uEG0cyCAc7?p=preview