Frage

I am using angular and angular-animate with the $animate service.
If I have the following:

<div ng-class="myClass"></div>

and my controller contains a model for myClass ($scope.myClass='bigger';), changing $scope.myClass will change the class on the div.
I want to simulate this behavior using the $animate service. The only class-related methods I have are addClass() and removeClass(). I was expected to find something like replaceClass().
More than that, I need a callback when the animation ends. The two options of mimicking the behavior I can think of are:
(remove class and add class happen one after another)

$animate.removeClass(element, oldClass, function() {
    $animate.addClass(element, newClass, function() {
        //animation is done by here
    });
});

(remove class and add class happen simultaneously)

var removeDeferred = $q.defer();
var addDeferred = $q.defer();
$animate.removeClass(element, oldClass, removeDeferred.resolve);
$animate.addClass(element, newClass, addDeferred.resolve);
$q.all([removeDeferred, addDeferred]).then(function() {
    // Animation ends here
});

What is the right and the best way to simulate the class replace?

War es hilfreich?

Lösung

There is a method $animate.setClass. I'm not sure why it doesn't show up in the docs.

https://github.com/angular/angular.js/blob/v1.2.x/src/ngAnimate/animate.js#L701-L720

$animate.setClass(element, newClass, oldClass, deferred.resolve)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top