Pregunta Secuencia de animación usando AngularJS addClass / removeClass


Estoy tratando de hacer una secuencia de animación combinando llamadas a addClass / removeClass.

Una vez finalizado el método de animación, se llama a "removeClass" para eliminar la animación y comenzar una nueva. Pero por alguna razón, no pasa nada. Estoy tratando de averiguar por qué no funciona? ¿Por qué no se quita la clase?

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

La versión completa se puede encontrar aquí

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


5
2017-10-08 19:22


origen


Respuestas:


Puedes mirar este truco que hice en tu 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);

          });
      };
  };
}]);

Recomiendo probar una solución css pura para mantener el código más claro. Puedes echar un vistazo aquí por ejemplo


4
2017-10-08 21:07



Aquí hay una versión menos sofisticada de la solución de richard (usando setClass en lugar de un tiempo de espera).

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

2
2017-10-14 15:32