From 0cb04e2e9171ca60d4779cb9e0b4fe73f0926ace Mon Sep 17 00:00:00 2001 From: Matias Niemelä Date: Tue, 7 May 2013 15:19:06 -0400 Subject: chore(ngIf): Add animation code to ngIf example and docs text to ngAnimate docs --- src/ng/animator.js | 1 + src/ng/directive/ngIf.js | 38 ++++++++++++++++++++++++++++++++------ 2 files changed, 33 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/ng/animator.js b/src/ng/animator.js index f2143f59..a69f0784 100644 --- a/src/ng/animator.js +++ b/src/ng/animator.js @@ -21,6 +21,7 @@ * | {@link ng.directive:ngView#animations ngView} | enter and leave | * | {@link ng.directive:ngInclude#animations ngInclude} | enter and leave | * | {@link ng.directive:ngSwitch#animations ngSwitch} | enter and leave | + * | {@link ng.directive:ngIf#animations ngIf} | enter and leave | * | {@link ng.directive:ngShow#animations ngShow & ngHide} | show and hide | * * You can find out more information about animations upon visiting each directive page. diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js index f1ceccda..492506c0 100755 --- a/src/ng/directive/ngIf.js +++ b/src/ng/directive/ngIf.js @@ -43,12 +43,38 @@ * the element is removed from the DOM tree (HTML). * * @example - - - Click me:
- Show when checked: I'm removed when the checkbox is unchecked -
-
+ + + Click me:
+ Show when checked: + + I'm removed when the checkbox is unchecked. + +
+ + .example-leave-setup, .example-enter-setup { + -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + } + + .example-enter-setup { + opacity:0; + } + .example-enter-setup.example-enter-start { + opacity:1; + } + + .example-leave-setup { + opacity:1; + } + .example-leave-setup.example-leave-start { + opacity:0; + } + +
*/ var ngIfDirective = ['$animator', function($animator) { return { -- cgit v1.2.3