Animation sequence using AngularJS addClass/removeClass

Question

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

After end of the animation method "removeClass" is called to remove the animation and start a new one. But for some reason, nothing happens. I'm trying to figure out why it does not work? Why class is not removed?

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

Full version can be found here

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

Answer 1

You can look at this hack 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 pure css solution to keep the code clearer. You can take a look here for example