Your SlideShare is downloading. ×
0
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
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,739

Published on

AngularJS Animations

AngularJS Animations

Published in: Technology, Business
4 Comments
32 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,739
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
4
Likes
32
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

×