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

Question

<a>我正在尝试根据功能在 -Tag上添加/删除动画toggleBookmark。当它返回 true 并且工作正常时，将添加活动类。但是，ng-addoricon__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（运行动画）类。