Your SlideShare is downloading. ×
AngularJS Animations
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS Animations

9,461
views

Published on

AngularJS Animations

AngularJS Animations

Published in: Technology, Business

4 Comments
29 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,461
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
4
Likes
29
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. <script src="angular.js"></script> <script src="angular-animate.js"></script> angular.module('app', ['ngAnimate']);
  • 2. Directive Supported Animations ngRepeat enter, leave and move ngView enter and leave ngInclude enter and leave ngSwitch enter and leave ngIf enter and leave ngClass add and remove ngShow & ngHide add and remove
  • 3. <ANY ... class="slide"> ... </ANY> CSS States .slide.ng-enter, .slide.ng-leave { transition: 0.5s linear all; } .slide.ng-enter {} /* starting animations for enter */ .slide.ng-enter-active {} /* terminal animations for enter */ .slide.ng-leave {} /* starting animations for leave */ .slide.ng-leave-active {} /* terminal animations for leave */
  • 4. <div some-directive class="effect"> Setup CSS .effect.ng-enter .effect.ng-leave .effect.ng-move .effect.ng-add .effect.ng-remove { { { { { transition: 1s linear all; opacity: 0; } ... } ... } ... } ... }
  • 5. <div some-directive class="'effect'"> Setup CSS Start CSS .effect.ng-enter-active .effect.ng-leave-active .effect.ng-move-active .effect.ng-add-active .effect.ng-remove-active { { { { { opacity: 1; } ... } ... } ... } ... }
  • 6. <div some-directive class="'effect'"> Setup CSS Start CSS  Once the animation is over then both CSS classes will be removed from the DOM.
  • 7. .ng-hide {display: none !important;} <ANY ng-show | ng-hide="{expression}" class="effect">...</ANY> .effect{...} /* transition */ .effect.ng-hide-remove, .effect.ng-hide-add{...} /* remove or add active*/ .effect.ng-hide-remove, .effect.ng-hide-add.ng-hide-add-active{...} /* add or remove active*/ .effect.ng-hide-add, .effect.ng-hide-remove.ng-hide-remove-active{...} CSS States
  • 8. <ANY ng-repeat ="{...}" class="effect"> ...</ANY> CSS States .effect.ng-enter {…} .effect.ng-enter-active {…} .effect.ng-leave {…} .effect.ng-leave-active {…} .effect.ng-move {…} .effect.ng-move-active {…}
  • 9. var myModule = angular.module('myModule', ['ngAnimate']); ngModule.animation('.my-crazy-animation', function () { return { enter: function (element, done) { //run the animation here and call done when the animation is complete return function (cancelled) { //this (optional) function will be called when the animation //completes or when the animation is cancelled (the cancelled //flag will be set to true if cancelled). }; }, leave: function (element, done) { }, move : function (element, done) { } }; });
  • 10. app.directive('clickAnimation', ['$animate', function ($animate) { return { link: function (scope, element, attrs) { // The attrs object is where the ngAnimate attribute is defined var animate = $animate(scope, attrs); element.bind('click', function () { animate.show(element); }); } }; }]); Click on the element will execute the animation. The show method reveals the element by setting the CSS property display to block and then starts the show animation directly after.
  • 11. Animation in AngularJS Ng Animate

×