diff options
Diffstat (limited to 'src/ng/directive')
| -rwxr-xr-x | src/ng/directive/ngIf.js | 38 |
1 files changed, 32 insertions, 6 deletions
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 { |