Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
<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
Nächste SlideShare
Wird geladen in …5
×

AngularJS Animations

12.439 Aufrufe

Veröffentlicht am

AngularJS Animations

Veröffentlicht in: Technologie, Business

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

×