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

score 4 · Accepted Answer · edited May 23 '17 at 12:13

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 '17 at 12:13

Community

1
1

answered Oct 08 '14 at 21:07

Richard Löwenström

1,533
13
16

thanks for you recommendation, I think it would be good practice – linksta Oct 09 '14 at 19:17
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 – Kalamarico May 26 '15 at 12:51
1

In retrospect you should use [$timeout](https://docs.angularjs.org/api/ng/service/$timeout) instead. setTimeout goes outside angular (so changes aren't detected by angular) and apply brings it back in again – Richard Löwenström May 26 '15 at 12:55
Sure, i have used $timeout instead of setTimeout, but that i'm asking is why calling $apply inside a timer works properly, my stagging animation works, but if i run the $apply out of a timer it not works. I'm doing this in .animation after addClass in 1.3 (in 1.3 addClass is not firing $digest) – Kalamarico May 26 '15 at 13:00
2

If you use $timeout you don't need $apply. – Richard Löwenström May 26 '15 at 13:02
1

setTimeout runs later so it isn't detected by angular, that's why I used $apply – Richard Löwenström May 26 '15 at 13:03
I realize you're asking something else now. I don't remember how angular animations work because I used css in the end for my purposes, sorry – Richard Löwenström May 26 '15 at 13:07

score 2 · Answer 2 · answered Oct 14 '15 at 15:32

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();
        }); 
    };
  };
}]);

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. — Justin Russo, Feb 22 '16 at 19:22

Animation sequence using AngularJS addClass/removeClass

2 Answers2