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?
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)