AngularJS css animation + done callback

Question

I am using AngularJS and would like to get notified when an animation is done. I know this can be done with javascript-defined animations like this myApp.animation(...), but I am curious if I can do this without javascript.

Question: Is it possible to use angular ng-enter and ng-leave css-transitions, and specify a done callback? I guess the animationend event is fired, so there should be a way to do this.

I have this:

HTML:

<div ng-if="item" class="myDiv"> {{ item.name }} </div>

CSS:

.myDiv.ng-enter {...}
.myDiv.ng-enter.ng-enter-active {...}
.myDiv.ng-leave {...}
.myDiv.ng-leave.ng-leave-active {...}

And I want to call myDone() when the animation has finished (i.e. after the ng-enter-active class is removed).

Yeah, that event works. I suggest you reading this: github.com/angular-ui/bootstrap/blob/master/src/transition/… That is a factory to run animations and be informed when they end. Learn the idea and try to apply it to your use case. — Jesus Rodriguez
– Jesus Rodriguez, Commented Dec 29, 2013 at 20:42

fracz · Accepted Answer · 2016-07-28 20:41:01Z

18

Yes you can, using the $animate service, which would usually be done in a custom directive. A simple case of animation would be to animate an element in some way on click. Say, for example to remove an element on click, with an animation specified using .ng-leave, passing a callback

app.directive('leaveOnClick', function($animate) {
  return {
    scope: {
      'leaveOnClick': '&'
    },
    link: function (scope, element) {
      scope.leaveOnClick = scope.leaveOnClick || (function() {});
      element.on('click', function() {
        scope.$apply(function() {
          $animate.leave(element, scope.leaveOnClick);
        });
      });
    }
  };
});

which could be used like:

<div class="my-div" leaveOnClick="done()">Click to remove</div>

With CSS to fade the element out:

.my-div.ng-leave {
  opacity: 1;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}
.my-div.ng-leave.ng-leave-active {
  opacity: 0;
}

You can see the above animation in action at this Plunker.

However, ngIf doesn't have any hooks to pass a callback in that I know of, so you'll have to write your own directive. What follows is a description of a modified version of ngIf, originally copied from the ngIf source, and renamed to animatedIf. It can be used by:

<div class="my-div" animated-if="shown" animated-if-leave-callback="leaveDone()" animated-if-enter-callback="enterDone()" >Some content</div>

The way it works is that it uses a manual watcher to react to changes of the expression passed to animated-if. The key differences to the original ngIf are the addition of a 'scope' parameter to pass the callbacks in:

scope: {
  'animatedIf': '=',
  'animatedIfEnterCallback': '&',
  'animatedIfLeaveCallback': '&'
},

and then modifying the calls to $animate.enter and $animate.leave to call these callbacks after the animation:

var callback = !oldValue && $scope.animatedIfEnterCallback ? $scope.animatedIfEnterCallback : (function() {});
$animate.enter(clone, $element.parent(), $element, callback);

$animate.leave(block.clone, ($scope.animatedIfLeaveCallback || (function() {})));

The enter one is a bit more complicated to not call the callback on initial loading of the directive. Because of the scope parameter, this directive creates an isolated scope, which it then uses when transcluding the contents. So another change that is required is to create and use a scope as a child from the $parent scope of the directive: the line

 childScope = $scope.$new();

must be changed to

 childScope = $scope.$parent.$new();

You can see the full source of the modified ngIf directive in this Plunker. This has only been tested extremely briefly.

There may well be a simpler way of doing this, maybe by not recreating the ngIf directive fully, but creating a directive with template that uses the original ngIf with some wrapper divs, such as

template: '<div><div ng-if="localVariable"><div ng-transclude></div></div></div>'

edited Jul 28, 2016 at 20:41

$fracz's user avatar$

fracz

21.4k18 gold badges109 silver badges154 bronze badges

answered Dec 30, 2013 at 9:25

Michal Charemza

27.3k15 gold badges114 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

swenedo Over a year ago

Thanks!! However, your animated-if does not work with data-binding inside the animated-if. See this forked plunker

Michal Charemza Over a year ago

You're right: I have edited the post and links to Plunker that allows data binding to the original scope.

Charlie Martin Over a year ago

FYI you could use angular.noop instead of (function() {}). Save you 3 characters :)

Vladius Over a year ago

@MichalCharemza Following your answer, it seems I have a problem with $scope.$apply not being used. So, for example, when I'm changing the controller inside of the callbacks, the view does not change. I'm currently using constructions like $scope.$apply(function() {ctrl.value = true;}); inside my callback to solve this.

Vladius Over a year ago

I have updated the plunker to support controller changes, using childScope.$apply I'm not exactly sure the script is totally fine, but providing it as a suggestion for solution.

Collectives™ on Stack Overflow

AngularJS css animation + done callback

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related