AngularJS ng-class 添加/删除动画不应用/触发答案

【问题标题】：AngularJS ng-class add/remove animation do not apply/fireAngularJS ng-class 添加/删除动画不应用/触发
【发布时间】：2014-04-02 13:58:01
【问题描述】：

我正在尝试基于toggleBookmark 函数在<a>-Tag 上添加/删除动画。当它返回 true 并且工作正常时，将添加活动类。但是，ng-add 或 icon__bookmark-add 动画不会在 <a> 标记上触发。

为什么？我做错了什么？

HTML：

<li ng-repeat="event in events | filter:searchText">
  <div ng-click="toggleBookmark(event.id)" class="events-list__icons">
    <a ng-class="{active:isBookmarked(event.id)}" class="icon__bookmark"></a>
  </div>
</li>

控制器：

$scope.isBookmarked = (id) ->
  BookmarkService.isBookmarked(id) // this just returns true or false

$scope.toggleBookmark = (id) ->
  BookmarkService.toggleBookmark(id) // returns nothing

CSS：

.icon__bookmark.ng-add,
.icon__bookmark.ng-add-active,
.icon__bookmark-add,
.icon__bookmark-add-active {
  animation: flip .6s ease-in-out;
  backface-visibility: visible;
}

【问题讨论】：

“但是 ng-add 或 icon__bookmark-add 动画不会触发...” - 这是在哪里定义的，您是如何定义的？
它在 css 中定义。编辑了我上面的帖子。
您的ng-class 属性有条件地添加了active 类。您没有该课程的样式。例如，.icon__bookmark.active.
我确实有 .active 的样式...但我想要的是 .ng-add 和 .ng-add-active 类，它们在播放完后会被删除。

标签： javascript angularjs animation ng-animate ng-class

【解决方案1】：

ng-class="{active:isBookmarked(event.id)}" 只添加类active。

您应该重新定义您的 CSS，以便“活动”运行动画。看到这个jsfiddle：http://jsfiddle.net/nicolasmoise/XaL9r/1/

您还可以使用 ngAnimate 服务并为 .events-list__icons 创建一个新指令。

$animate.addClass(element, 'active')

将添加active、active-add（用于设置动画）和active-add-active（用于运行动画）类。

【讨论】：

这完全正确：使用括号格式而不是仅仅让一个单独的类为我做了。