AngularJS ng类添加/删除动画不应用/触发

Question

我试图基于toggleBookmark函数在<a> toggleBookmark添加/删除上添加动画。 当活动类返回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;
}

Answer 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 （以运行动画）类。