I am currently utilizing both angular and angular-animate within my project, specifically with the $animate service.
Consider the following scenario:
<div ng-class="myClass"></div>
Within my controller, I have a model for myClass ($scope.myClass='bigger';). Any changes made to $scope.myClass will subsequently alter the class assigned to the div element.
In this instance, I am seeking to replicate this functionality using the $animate service. However, I have only come across methods like addClass() and removeClass(), as opposed to an expected replaceClass().
Moreover, I am in need of a callback function to execute once the animation has concluded. There are two potential approaches to mimic the desired behavior:
(removing and adding classes sequentially)
$animate.removeClass(element, oldClass, function() {
$animate.addClass(element, newClass, function() {
// Animation completes here
});
});
(simultaneous removal and addition of classes)
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 completes here
});
What would be the most suitable and effective approach to simulate a class replacement?