Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

AngularJS Animations

12.439 visualizaciones

Publicado el

AngularJS Animations

Publicado en: Tecnología, Empresariales

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

×