CODEWITHSUNDEEP
javascriptangularjsanimationng-animateng-class
Martin Broder
Martin Broder

Reputation: 335

AngularJS ng-class add/remove animation do not apply/fire

I'm trying to add an animation on add/remove on the <a>-Tag, based on the toggleBookmark function. The active class is added when it returns true and works fine. However, the ng-add or icon__bookmark-add animation does not fire on the <a> tag.

Why? What am I doing wrong?

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>

Controller:

$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;
}

Upvotes: 2

Views: 3895

Answers (1)

goldins
goldins

Reputation: 1376

ng-class="{active:isBookmarked(event.id)}" only adds the class active.

You should redefine your CSS so that 'active' runs the animation. See this jsfiddle: http://jsfiddle.net/nicolasmoise/XaL9r/1/

You can also use the ngAnimate service and create a new directive for .events-list__icons.

$animate.addClass(element, 'active')

Would add active, active-add (to set up the animation), and active-add-active (to run the animation) classes.

Upvotes: 3

Related Questions