diff options
Diffstat (limited to 'src/ng/directive')
| -rw-r--r-- | src/ng/directive/ngClass.js | 3 | ||||
| -rwxr-xr-x | src/ng/directive/ngIf.js | 19 | ||||
| -rw-r--r-- | src/ng/directive/ngInclude.js | 13 | ||||
| -rw-r--r-- | src/ng/directive/ngRepeat.js | 25 | ||||
| -rw-r--r-- | src/ng/directive/ngShowHide.js | 71 | ||||
| -rw-r--r-- | src/ng/directive/ngSwitch.js | 31 |
6 files changed, 89 insertions, 73 deletions
diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js index 0c4d23f0..001f67bb 100644 --- a/src/ng/directive/ngClass.js +++ b/src/ng/directive/ngClass.js @@ -109,8 +109,7 @@ function classDirective(name, selector) { <span ng-class="myVar">Sample Text</span> </file> <file name="style.css"> - .my-class-add, - .my-class-remove { + .my-class-add, .my-class-remove { -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; -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js index 9d99d859..87c976a9 100755 --- a/src/ng/directive/ngIf.js +++ b/src/ng/directive/ngIf.js @@ -47,26 +47,31 @@ <file name="index.html"> Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/> Show when checked: - <span ng-if="checked" class="example-if"> + <span ng-if="checked" class="animate-if"> I'm removed when the checkbox is unchecked. </span> </file> <file name="animations.css"> - .example-if.ng-enter, - .example-if.ng-leave { + .animate-if { + background:white; + border:1px solid black; + padding:10px; + } + + .animate-if.ng-enter, .animate-if.ng-leave { -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; -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-if.ng-enter, - .example-if.ng-leave.ng-leave-active { + .animate-if.ng-enter, + .animate-if.ng-leave.ng-leave-active { opacity:0; } - .example-if.ng-enter.ng-enter-active, - .example-if.ng-leave { + .animate-if.ng-enter.ng-enter-active, + .animate-if.ng-leave { opacity:1; } </file> diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js index 2ab9f847..0f1f245c 100644 --- a/src/ng/directive/ngInclude.js +++ b/src/ng/directive/ngInclude.js @@ -71,10 +71,21 @@ Content of template2.html </file> <file name="animations.css"> + .example-animate-container { + position:relative; + background:white; + border:1px solid black; + height:40px; + overflow:hidden; + } + + .example-animate-container > div { + padding:10px; + } + .include-example.ng-enter, .include-example.ng-leave { -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; diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js index 8f12b7c2..50be2a61 100644 --- a/src/ng/directive/ngRepeat.js +++ b/src/ng/directive/ngRepeat.js @@ -127,7 +127,7 @@ ]"> I have {{friends.length}} friends. They are: <input type="search" ng-model="q" placeholder="filter friends..." /> - <ul> + <ul class="example-animate-container"> <li class="animate-repeat" ng-repeat="friend in friends | filter:q"> [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. </li> @@ -135,7 +135,22 @@ </div> </file> <file name="animations.css"> - .animate-repeat { + .example-animate-container { + background:white; + border:1px solid black; + list-style:none; + margin:0; + padding:0; + } + + .example-animate-container > li { + padding:10px; + list-style:none; + } + + .animate-repeat.ng-enter, + .animate-repeat.ng-leave, + .animate-repeat.ng-move { -webkit-transition:all linear 0.5s; -moz-transition:all linear 0.5s; -o-transition:all linear 0.5s; @@ -145,19 +160,25 @@ .animate-repeat.ng-enter { line-height:0; opacity:0; + padding-top:0; + padding-bottom:0; } .animate-repeat.ng-enter.ng-enter-active { line-height:20px; opacity:1; + padding:10px; } .animate-repeat.ng-leave { opacity:1; line-height:20px; + padding:10px; } .animate-repeat.ng-leave.ng-leave-active { opacity:0; line-height:0; + padding-top:0; + padding-bottom:0; } .animate-repeat.ng-move { } diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js index 1bba11ef..e5ce713d 100644 --- a/src/ng/directive/ngShowHide.js +++ b/src/ng/directive/ngShowHide.js @@ -27,56 +27,42 @@ Click me: <input type="checkbox" ng-model="checked"><br/> <div> Show: - <span class="check-element example-show-hide" ng-show="checked"> + <div class="check-element animate-show" ng-show="checked"> <span class="icon-thumbs-up"></span> I show up when your checkbox is checked. - </span> + </div> </div> <div> Hide: - <span class="check-element example-show-hide" ng-hide="checked"> + <div class="check-element animate-show" ng-hide="checked"> <span class="icon-thumbs-down"></span> I hide when your checkbox is checked. - </span> + </div> </div> </file> <file name="animations.css"> - .example-show-hide { + .animate-show.ng-hide-add, + .animate-show.ng-hide-remove { -webkit-transition:all linear 0.5s; -moz-transition:all linear 0.5s; - -ms-transition:all linear 0.5s; -o-transition:all linear 0.5s; transition:all linear 0.5s; - display:block; - } - .example-show-hide.ng-hide { - display:none; + display:block!important; } - .example-show-hide.ng-hide-remove { - display:block; + .animate-show.ng-hide-add.ng-hide-add-active, + .animate-show.ng-hide-remove { line-height:0; opacity:0; padding:0 10px; } - .example-show-hide.ng-hide-remove.ng-hide-remove-active { - line-height:20px; - opacity:1; - padding:10px; - border:1px solid black; - background:white; - } - .example-show-hide.ng-hide-add { + .animate-show.ng-hide-add, + .animate-show.ng-hide-remove.ng-hide-remove-active { line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; } - .example-show-hide.ng-hide-add.ng-hide-add-active { - line-height:0; - opacity:0; - padding:0 10px; - } .check-element { padding:10px; @@ -132,55 +118,42 @@ var ngShowDirective = ['$animate', function($animate) { Click me: <input type="checkbox" ng-model="checked"><br/> <div> Show: - <span class="check-element example-show-hide" ng-show="checked"> + <div class="check-element animate-hide" ng-show="checked"> <span class="icon-thumbs-up"></span> I show up when your checkbox is checked. - </span> + </div> </div> <div> Hide: - <span class="check-element example-show-hide" ng-hide="checked"> + <div class="check-element animate-hide" ng-hide="checked"> <span class="icon-thumbs-down"></span> I hide when your checkbox is checked. - </span> + </div> </div> </file> <file name="animations.css"> - .example-show-hide { + .animate-hide.ng-hide-add, + .animate-hide.ng-hide-remove { -webkit-transition:all linear 0.5s; -moz-transition:all linear 0.5s; -o-transition:all linear 0.5s; transition:all linear 0.5s; - display:block; - } - .example-show-hide.ng-hide { - display:none; + display:block!important; } - .example-show-hide.ng-hide-remove { - display:block; + .animate-hide.ng-hide-add.ng-hide-add-active, + .animate-hide.ng-hide-remove { line-height:0; opacity:0; padding:0 10px; } - .example-show-hide.ng-hide-remove.ng-hide-remove-active { - line-height:20px; - opacity:1; - padding:10px; - border:1px solid black; - background:white; - } - .example-show-hide.ng-hide-add { + .animate-hide.ng-hide-add, + .animate-hide.ng-hide-remove.ng-hide-remove-active { line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; } - .example-show-hide.ng-hide-add.ng-hide-add-active { - line-height:0; - opacity:0; - padding:0 10px; - } .check-element { padding:10px; diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js index 38a123a2..1ddf90fb 100644 --- a/src/ng/directive/ngSwitch.js +++ b/src/ng/directive/ngSwitch.js @@ -51,8 +51,7 @@ </select> <tt>selection={{selection}}</tt> <hr/> - <div - class="example-animate-container animate-switch" + <div class="animate-switch-container" ng-switch on="selection"> <div ng-switch-when="settings">Settings Div</div> <div ng-switch-when="home">Home Span</div> @@ -67,7 +66,20 @@ } </file> <file name="animations.css"> - .animate-switch > * { + .animate-switch-container { + position:relative; + background:white; + border:1px solid black; + height:40px; + overflow:hidden; + } + + .animate-switch-container > div { + padding:10px; + } + + .animate-switch-container > .ng-enter, + .animate-switch-container > .ng-leave { -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; -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; @@ -80,22 +92,17 @@ bottom:0; } - .example-animate-container > * { - display:block; - padding:10px; - } - - .animate-switch > .ng-enter { + .animate-switch-container > .ng-enter { top:-50px; } - .animate-switch > .ng-enter.ng-enter-active { + .animate-switch-container > .ng-enter.ng-enter-active { top:0; } - .animate-switch > .ng-leave { + .animate-switch-container > .ng-leave { top:0; } - .animate-switch > .ng-leave.ng-leave-active { + .animate-switch-container > .ng-leave.ng-leave-active { top:50px; } </file> |