Skip to content

Instantly share code, notes, and snippets.

@anonymoussc

anonymoussc/README.md

Created August 7, 2015 09:13
Show Gist options
  • Save anonymoussc/c9bd9b01a1a4d1c5b9e4 to your computer and use it in GitHub Desktop.
Save anonymoussc/c9bd9b01a1a4d1c5b9e4 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS ngIf JavaScript animation
Raw
README.md

##AngularJS ngIf JavaScript animation

Raw
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS JavaScript animations - ngIf</title>
</head>
<body>
<div>
<button ng-click="toggleNgIf = !toggleNgIf">Display/Remove the div below</button>
<div ng-if="toggleNgIf" class="ifJsAnimation">
This is a div element with ng-if="toggleNgIf"
</div>
</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>
Raw
script.js
/**
* @name ifJsAnimation
* @desc The ngIf sample animation function
*/
function ifJsAnimation() {
function animateOpacity(element, done, opacity) {
jQuery(element).animate({
opacity : opacity
}, 3000, done);
}
/**
* @name enterAnimation
* @desc The enter animation function called when an element enters DOM
* @param element - The element that is entering DOM
* @param done - Callback function, it must be called to finish the animation
*/
var enterAnimation = function (element, done) {
//Animate the opacity
jQuery(element).css({opacity : 0});
animateOpacity(element, done, 1);
// Here is the optional return function that treats completed or cancelled animations
return function (isCancelled) {
if (isCancelled) {
element.stop();
}
};
};
/**
* @name leaveAnimation
* @desc The leave animation function called when an element leaves DOM
* @param element - The element that is leaving DOM
* @param done - Callback function, it must be called to finish the animation
*/
var leaveAnimation = function (element, done) {
animateOpacity(element, done, 0);
// Here is the optional return function that treats completed or cancelled animations
return function (isCancelled) {
if (isCancelled) {
element.stop();
}
};
};
return {
enter : enterAnimation,
leave : leaveAnimation
};
}
var app = angular.module('myApp', ['ngAnimate']).animation(".ifJsAnimation", ifJsAnimation);
Raw
style.css
/* Styles go here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment