Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
<script src="angular.js"></script>
<script src="angular-animate.js"></script>

angular.module('app', ['ngAnimate']);
Directive

Supported Animations

ngRepeat

enter, leave and move

ngView

enter and leave

ngInclude

enter and leave

ngS...
<ANY ... class="slide"> ... </ANY>
CSS States
.slide.ng-enter,
.slide.ng-leave {
transition: 0.5s linear all;
}
.slide.ng-...
<div some-directive class="effect">

Setup
CSS

.effect.ng-enter
.effect.ng-leave
.effect.ng-move
.effect.ng-add
.effect.n...
<div some-directive class="'effect'">

Setup
CSS

Start
CSS

.effect.ng-enter-active
.effect.ng-leave-active
.effect.ng-mo...
<div some-directive class="'effect'">

Setup
CSS

Start
CSS

 Once the animation is over then both CSS
classes will be re...
.ng-hide {display: none !important;}
<ANY ng-show | ng-hide="{expression}" class="effect">...</ANY>
.effect{...}
/* transi...
<ANY ng-repeat ="{...}" class="effect"> ...</ANY>

CSS States
.effect.ng-enter {…}
.effect.ng-enter-active {…}
.effect.ng-...
var myModule = angular.module('myModule', ['ngAnimate']);
ngModule.animation('.my-crazy-animation', function () {
return {...
app.directive('clickAnimation', ['$animate', function ($animate) {
return {
link: function (scope, element, attrs) {
// Th...
Animation in AngularJS
Ng Animate
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
AngularJS Animations
Upcoming SlideShare
Loading in …5
×

of

AngularJS Animations Slide 1 AngularJS Animations Slide 2 AngularJS Animations Slide 3 AngularJS Animations Slide 4 AngularJS Animations Slide 5 AngularJS Animations Slide 6 AngularJS Animations Slide 7 AngularJS Animations Slide 8 AngularJS Animations Slide 9 AngularJS Animations Slide 10 AngularJS Animations Slide 11 AngularJS Animations Slide 12 AngularJS Animations Slide 13 AngularJS Animations Slide 14 AngularJS Animations Slide 15 AngularJS Animations Slide 16 AngularJS Animations Slide 17
Upcoming SlideShare
AngulrJS Overview
Next

34 Likes

Share

AngularJS Animations

AngularJS Animations

Related Books

Free with a 30 day trial from Scribd

See all

AngularJS Animations

  1. 1. <script src="angular.js"></script> <script src="angular-animate.js"></script> angular.module('app', ['ngAnimate']);
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Animation in AngularJS Ng Animate
  • NiraiMathi1

    Dec. 11, 2019
  • ShivangJoshi6

    May. 29, 2016
  • devuu1

    Nov. 7, 2015
  • MahmoudShedid2

    Oct. 18, 2015
  • Bnayal

    Jul. 1, 2015
  • debop

    May. 19, 2015
  • cogee

    Apr. 28, 2015
  • fcoulises

    Feb. 21, 2015
  • vuongdeking

    Feb. 10, 2015
  • overloading1

    Dec. 2, 2014
  • foreverTSN

    Nov. 23, 2014
  • hashplus

    Nov. 9, 2014
  • gbrivate

    Nov. 5, 2014
  • b3nyis

    Sep. 11, 2014
  • felixchiu

    Aug. 22, 2014
  • proshailendra

    Aug. 13, 2014
  • BrantChen1

    Jul. 27, 2014
  • kingsrikanth575

    Jul. 14, 2014
  • s0013254

    Jul. 2, 2014
  • hanboss

    Jun. 29, 2014

AngularJS Animations

Views

Total views

13,074

On Slideshare

0

From embeds

0

Number of embeds

2,193

Actions

Downloads

0

Shares

0

Comments

0

Likes

34

×