javascript - ngAnimate removeClass 无法正常工作

Question

我一直在使用 AngularJS 1.2.14 的 ngAnimate 模块

当我使用 $animate.addClass 时，它可以正常添加 ng-animate、-add、-add-active

但是，当我使用 $animate.removeClass 时，它似乎只运行 elem.removeClass 的等效项。没有任何动画类应用于删除(例如 ng-animate、-remove、-remove-active)

这是复制问题的 plnkr。

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

我可以手动编写删除方法的代码，但我更愿意使用 Animate 指令。

Answer 1

您需要在元素的类本身上定义过渡，而不是在您要添加/设置动画的类上。

这样 $animate 将查看类并意识到它应用了过渡，并相应地设置动画。否则它不会添加/删除类，因为它们会同时发生。

参见 my fork

使用的 CSS 类:

.classname {
  // The class of the element you want to animate
  // Its default state (invisible).

}

.classname.visible-class-add {
  // Any preparatory work you need to do before animating
  // This is the ideal place to put your transition property.
}

.classname.visible-class-add-active{
  // during-animation class (often none needed)
}

.classname.visible-class-remove {
  // Pre- remove class: possibly the same as .visible-class-add
}

.classname.visible-class-remove-active {
  // any during-animation style (often none required)
}

.classname.visible-class {
  // The visible state.
}