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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With