Question

我尝试根据<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，以便'active'运行动画。看到这个jsfiddle：http://jsfiddle.net/nicolasmoise/XaL9r/1/

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

$animate.addClass(element, 'active')

会添加active，active-add（设置动画）和active-add-active（运行动画）类。

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

1 个答案: