diff options
| -rw-r--r-- | src/ng/animator.js | 1 | ||||
| -rwxr-xr-x | src/ng/directive/ngIf.js | 38 |
2 files changed, 33 insertions, 6 deletions
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 - <doc:example> - <doc:source> - Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/> - Show when checked: <span ng-if="checked">I'm removed when the checkbox is unchecked</span> - </doc:source> - </doc:example> + <example animations="true"> + <file name="index.html"> + Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/> + Show when checked: + <span ng-if="checked" ng-animate="'example'"> + I'm removed when the checkbox is unchecked. + </span> + </file> + <file name="animations.css"> + .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; + } + </file> + </example> */ var ngIfDirective = ['$animator', function($animator) { return { |