##AngularJS ngHide JavaScript animation
Created
August 7, 2015 08:39
-
-
Save anonymoussc/217295b3266e7b2e87ae to your computer and use it in GitHub Desktop.
AngularJS ngHide JavaScript animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="myApp"> | |
| <head> | |
| <title>AngularJS ngHide JavaScript animation</title> | |
| </head> | |
| <body> | |
| <div> | |
| <button ng-click="hide = !hide">Hide/Show the div below</button> | |
| <div ng-hide="hide" class="hideJsAnimation"> | |
| This is a div element with ng-hide="hide" | |
| </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @name hideJsAnimation | |
| * @desc The ngHide sample animation function | |
| */ | |
| function hideJsAnimation() { | |
| function animateOpacity(element, done, opacity) { | |
| jQuery(element).animate({ | |
| opacity : opacity, | |
| height : ["toggle", "swing"] | |
| }, 3000, done); | |
| } | |
| /** | |
| * @name beforeAddClassAnimation | |
| * @desc The animation function called before a class is added to the element | |
| * @param element - The element that will have the class appended | |
| * @param className - The name of the class that will be appended to the element | |
| * @param done - Callback function, it must be called to finish the animation | |
| */ | |
| var beforeAddClassAnimation = function (element, className, done) { | |
| //Animate the opacity and style the height to display a curtain effect | |
| animateOpacity(element, done, 0); | |
| // 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) { | |
| animateOpacity(element, done, 1); | |
| // Here is the optional return function that treats completed or cancelled animations | |
| return function (isCancelled) { | |
| if (isCancelled) { | |
| element.stop(); | |
| } | |
| }; | |
| }; | |
| return { | |
| beforeAddClass : beforeAddClassAnimation, | |
| removeClass : removeClassAnimation | |
| }; | |
| } | |
| var app = angular.module('myApp', ['ngAnimate']).animation(".hideJsAnimation", hideJsAnimation); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Styles go here */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment