CODEWITHSUNDEEP
angularjsanimate.cssangularjs-animation
linksta
linksta

Reputation: 53

Animation sequence using AngularJS addClass/removeClass

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

Upvotes: 5

Views: 10323

Answers (2)

amwmedia
amwmedia

Reputation: 31

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

Upvotes: 2

Richard Löwenström
Richard Löwenström

Reputation: 1553

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

Upvotes: 4

Related Questions