Animation sequence using AngularJS addClass / removeClass

Question

I am trying to make an animation sequence by combining calls to addClass / removeClass.

After the animation method has completed, "removeClass" is called to remove the animation and start a new one. But for some reason, nothing happens. I'm trying to understand why this is not working? Why is the class not deleted?

$animate.addClass(element, 'fadeInDown').then(function() { $animate.removeClass(element, 'fadeInDown'); // why is it not working? $animate.addClass(element, 'fadeOutDown'); }); 

Full version is available here.

http://plnkr.co/edit/EFybfU4jcZoT3S7jCpM8?p=preview

Answer 1

You can see this hack that I made in your plunker: http://plnkr.co/edit/iMMdPUrIz132PsCtB2Uq?p=preview

 var myApp = angular.module('myApp', ['ngAnimate']); myApp.controller('Controller', function($scope) {}); myApp.directive('animated', ['$animate', '$window', function($animate, $window) { return function(scope, element, attrs) { scope.animate = function() { $animate.addClass(element, 'fadeInDown').then(function() { $animate.removeClass(element, 'fadeInDown'); // why is it not working? setTimeout(function() { scope.$apply(function() { $animate.addClass(element, 'fadeOutDown'); }); }, 0); }); }; }; }]); 

I recommend trying a clean css solution to clear the code. You can look here , for example

Answer 2

It uses a less hacky version of the richard solution (using setClass instead of timeout).

http://plnkr.co/edit/lIfPq2acHUu9Va6gou05?p=preview

 var myApp = angular.module('myApp', ['ngAnimate']); myApp.controller('Controller', function ($scope) { }); myApp.directive('animated', ['$animate', '$window', function ($animate, $window) { return function (scope, element, attrs) { scope.animate = function() { $animate.addClass(element, 'fadeInDown') .then(function() { $animate.setClass(element, 'fadeOutDown', 'fadeInDown'); scope.$digest(); }); }; }; }]);