Skip to content

Instantly share code, notes, and snippets.

@anonymoussc
Last active August 29, 2015 14:26
Show Gist options
  • Save anonymoussc/9d4520bda37410da704b to your computer and use it in GitHub Desktop.
Save anonymoussc/9d4520bda37410da704b to your computer and use it in GitHub Desktop.
AngularJS ngClass JavaScript Animation

##AngularJS ngClass JavaScript Animation

When we click on the Toggle ngClass animation button, animationClass is added to the element with the firstJsAnimation class, so the ngAnimate module will check if there is an addClass animation callback function for elements with the firstJsAnimation class. If there is any, it will trigger the animation by calling the callback function.

AngularJS JavaScript animation works on the principle of callback functions. Each callback function has at least two parameters: element , which is the DOM element to be animated, and done , which is a callback function used to tell AngularJS when the animations are completed by calling it. We have passed the done function to jQuery's animate callback parameter in the sample; it's mandatory to call this function so that the $animate service knows when the animation is completed.

Each callback function can return an optional function that is called when the animation is completed or the execution has been canceled. We can tell whether the animation has been canceled or executed by the first parameter that is a Boolean; if that is true , it means that the animation has been cancelled and if it is false, it means the animation has been executed. In our samples, we added a treatment for cancelled animations, stopping the element jQuery animation. This might happen, for example, if you click twice on the Toggle ngClass animation button before the first animation has completed.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ngClass JavaScript Animation</title>
<link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<button ng-click="toggleNgClass = !toggleNgClass">Toggle ngClass animation</button>
<div ng-class="{'animationClass' : toggleNgClass}" class="firstJsAnimation alert alert-info">
This element has class 'ngClassAnimationSample' and the ngClass directive is declared as
ng-class="{'animationClass' : toggleNgClass}"
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
<script src="script.js"></script>
</body>
</html>
/**
* @name firstJsAnimation
* @desc The first sample animation function
*/
function firstJsAnimation() {
/**
* @name addClassAnimation
* @desc The animation function called when a class is removed from the element
* @param element - The element that will have the class removed
* @param className - The name of the class that will be removed from the element
* @param done - Callback function, it must be called to finish the animation
*/
var addClassAnimation = function (element, className, done) {
//Check if the class added is the one that triggers the animation
if (className != 'animationClass') {
return;
}
//Animate to slide up and then call done function
jQuery(element).slideUp(300, done);
// Here is the optional return function that treats completed or cancelled animations
return function (isCancelled) {
if (isCancelled) {
element.stop();
}
};
};
/**
* @name removeClassAnimation
* @desc The animation function called when a class is removed from the element
* @param element - The element that will have the class removed
* @param className - The name of the class that will be removed from the element
* @param done - Callback function, it must be called to finish the animation
*/
var removeClassAnimation = function (element, className, done) {
//Check if the class removed is the one that triggers the animation
if (className != 'animationClass') {
return;
}
//Animate to slide down and then call done function
jQuery(element).slideDown(300, done);
// Here is the optional return function that treats completed or cancelled animations
return function (isCancelled) {
if (isCancelled) {
element.stop();
}
};
};
return {
addClass : addClassAnimation,
removeClass : removeClassAnimation
};
}
var app = angular.module('myApp', ['ngAnimate']).animation(".firstJsAnimation", firstJsAnimation);
/* Styles go here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment