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

Community · Accepted Answer · 2017-05-23 12:13:43Z

4

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

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Oct 8, 2014 at 21:07

Richard Löwenström

1,55313 silver badges16 bronze badges

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

7 Comments

linksta Over a year ago

thanks for you recommendation, I think it would be good practice

Kalamarico Over a year ago

It works for me for a same problem, one question, why did you put the $apply call inside a timer? it works for sure, and if i do the $apply without timer all the animations breaks and not works, i think the call of $digest goes crazy, but no inside the timer.... why :-O

Richard Löwenström Over a year ago

In retrospect you should use $timeout instead. setTimeout goes outside angular (so changes aren't detected by angular) and apply brings it back in again

Richard Löwenström Over a year ago

If you use $timeout you don't need $apply.

Richard Löwenström Over a year ago

setTimeout runs later so it isn't detected by angular, that's why I used $apply

|

amwmedia · Accepted Answer · 2015-10-14 15:32:48Z

2

Here's a less hackety version of richard's solution (using setClass instead of a 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();
        }); 
    };
  };
}]);

answered Oct 14, 2015 at 15:32

amwmedia

313 bronze badges

1 Comment

Justin Russo Over a year ago

You mean that you are using the "then" promise, and not "setTimeout." "setClass is a function of $angular that you are calling after the "then" promise is fulfilled.

Collectives™ on Stack Overflow

Animation sequence using AngularJS addClass/removeClass

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related