diff options
| -rw-r--r-- | src/ng/directive/ngClass.js | 15 | ||||
| -rw-r--r-- | src/ng/directive/ngIf.js | 9 | ||||
| -rw-r--r-- | src/ng/directive/ngInclude.js | 20 | ||||
| -rw-r--r-- | src/ng/directive/ngRepeat.js | 40 | ||||
| -rw-r--r-- | src/ng/directive/ngShowHide.js | 52 | ||||
| -rw-r--r-- | src/ng/directive/ngSwitch.js | 26 | ||||
| -rw-r--r-- | src/ngRoute/directive/ngView.js | 27 |
7 files changed, 71 insertions, 118 deletions
diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js index 0dbac002..ef03f4ab 100644 --- a/src/ng/directive/ngClass.js +++ b/src/ng/directive/ngClass.js @@ -160,26 +160,17 @@ function classDirective(name, selector) { <input type="button" value="set" ng-click="myVar='my-class'"> <input type="button" value="clear" ng-click="myVar=''"> <br> - <span ng-class="myVar">Sample Text</span> + <span class="base-class" ng-class="myVar">Sample Text</span> </file> <file name="style.css"> - .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; + .base-class { transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; } - .my-class, - .my-class-add.my-class-add-active { + .base-class.my-class { color: red; font-size:3em; } - - .my-class-remove.my-class-remove-active { - font-size:1.0em; - color:black; - } </file> <file name="scenario.js"> it('should check ng-class', function() { diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js index 78547f47..5ff889c2 100644 --- a/src/ng/directive/ngIf.js +++ b/src/ng/directive/ngIf.js @@ -59,10 +59,11 @@ padding:10px; } + /* + The transition styles can also be placed on the CSS base class above + */ .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; } @@ -71,8 +72,8 @@ opacity:0; } - .animate-if.ng-enter.ng-enter-active, - .animate-if.ng-leave { + .animate-if.ng-leave, + .animate-if.ng-enter.ng-enter-active { opacity:1; } </file> diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js index 13b47234..f4b84fcf 100644 --- a/src/ng/directive/ngInclude.js +++ b/src/ng/directive/ngInclude.js @@ -51,8 +51,8 @@ </select> url of the template: <tt>{{template.url}}</tt> <hr/> - <div class="example-animate-container"> - <div class="include-example" ng-include="template.url"></div> + <div class="slide-animate-container"> + <div class="slide-animate" ng-include="template.url"></div> </div> </div> </file> @@ -71,7 +71,7 @@ Content of template2.html </file> <file name="animations.css"> - .example-animate-container { + .slide-animate-container { position:relative; background:white; border:1px solid black; @@ -79,14 +79,12 @@ overflow:hidden; } - .example-animate-container > div { + .slide-animate { padding:10px; } - .include-example.ng-enter, .include-example.ng-leave { + .slide-animate.ng-enter, .slide-animate.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; position:absolute; @@ -98,17 +96,17 @@ padding:10px; } - .include-example.ng-enter { + .slide-animate.ng-enter { top:-50px; } - .include-example.ng-enter.ng-enter-active { + .slide-animate.ng-enter.ng-enter-active { top:0; } - .include-example.ng-leave { + .slide-animate.ng-leave { top:0; } - .include-example.ng-leave.ng-leave-active { + .slide-animate.ng-leave.ng-leave-active { top:50px; } </file> diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js index 9e5ad2f5..c7d0c005 100644 --- a/src/ng/directive/ngRepeat.js +++ b/src/ng/directive/ngRepeat.js @@ -140,49 +140,35 @@ border:1px solid black; list-style:none; margin:0; - padding:0; + padding:0 10px; } - .example-animate-container > li { - padding:10px; + .animate-repeat { + line-height:40px; list-style:none; + box-sizing:border-box; } + .animate-repeat.ng-move, .animate-repeat.ng-enter, - .animate-repeat.ng-leave, - .animate-repeat.ng-move { + .animate-repeat.ng-leave { -webkit-transition:all linear 0.5s; - -moz-transition:all linear 0.5s; - -o-transition:all linear 0.5s; transition:all linear 0.5s; } + .animate-repeat.ng-leave.ng-leave-active, + .animate-repeat.ng-move, .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; + max-height:0; } - .animate-repeat.ng-leave { + .animate-repeat.ng-leave, + .animate-repeat.ng-move.ng-move-active, + .animate-repeat.ng-enter.ng-enter-active { opacity:1; - line-height:20px; - padding:10px; + max-height:40px; } - .animate-repeat.ng-leave.ng-leave-active { - opacity:0; - line-height:0; - padding-top:0; - padding-bottom:0; - } - - .animate-repeat.ng-move { } - .animate-repeat.ng-move.ng-move-active { } </file> <file name="scenario.js"> it('should render initial data set', function() { diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js index 5b13a57b..a38a7e7a 100644 --- a/src/ng/directive/ngShowHide.js +++ b/src/ng/directive/ngShowHide.js @@ -100,31 +100,27 @@ </div> </file> <file name="animations.css"> - .animate-show.ng-hide-add, - .animate-show.ng-hide-remove { + .animate-show { -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!important; + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; } - .animate-show.ng-hide-add.ng-hide-add-active, + .animate-show.ng-hide-add, .animate-show.ng-hide-remove { + display:block!important; + } + + .animate-show.ng-hide { line-height:0; opacity:0; padding:0 10px; } - .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; - } - .check-element { padding:10px; border:1px solid black; @@ -253,31 +249,27 @@ var ngShowDirective = ['$animate', function($animate) { </div> </file> <file name="animations.css"> - .animate-hide.ng-hide-add, - .animate-hide.ng-hide-remove { + .animate-hide { -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!important; + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; } - .animate-hide.ng-hide-add.ng-hide-add-active, + .animate-hide.ng-hide-add, .animate-hide.ng-hide-remove { + display:block!important; + } + + .animate-hide.ng-hide { line-height:0; opacity:0; padding:0 10px; } - .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; - } - .check-element { padding:10px; border:1px solid black; diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js index b67aa904..11ef7b71 100644 --- a/src/ng/directive/ngSwitch.js +++ b/src/ng/directive/ngSwitch.js @@ -54,9 +54,9 @@ <hr/> <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> - <div ng-switch-default>default</div> + <div class="animate-switch" ng-switch-when="settings">Settings Div</div> + <div class="animate-switch" ng-switch-when="home">Home Span</div> + <div class="animate-switch" ng-switch-default>default</div> </div> </div> </file> @@ -75,15 +75,12 @@ overflow:hidden; } - .animate-switch-container > div { + .animate-switch { padding:10px; } - .animate-switch-container > .ng-enter, - .animate-switch-container > .ng-leave { + .animate-switch.ng-animate { -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; position:absolute; @@ -93,19 +90,14 @@ bottom:0; } - .animate-switch-container > .ng-enter { + .animate-switch.ng-leave.ng-leave-active, + .animate-switch.ng-enter { top:-50px; } - .animate-switch-container > .ng-enter.ng-enter-active { + .animate-switch.ng-leave, + .animate-switch.ng-enter.ng-enter-active { top:0; } - - .animate-switch-container > .ng-leave { - top:0; - } - .animate-switch-container > .ng-leave.ng-leave-active { - top:50px; - } </file> <file name="scenario.js"> it('should start in settings', function() { diff --git a/src/ngRoute/directive/ngView.js b/src/ngRoute/directive/ngView.js index 3a296b5b..00e047ca 100644 --- a/src/ngRoute/directive/ngView.js +++ b/src/ngRoute/directive/ngView.js @@ -35,8 +35,8 @@ ngRouteModule.directive('ngView', ngViewFactory); <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> | <a href="Book/Scarlet">Scarlet Letter</a><br/> - <div class="example-animate-container"> - <div ng-view class="view-example"></div> + <div class="view-animate-container"> + <div ng-view class="view-animate"></div> </div> <hr /> @@ -64,7 +64,9 @@ ngRouteModule.directive('ngView', ngViewFactory); </file> <file name="animations.css"> - .example-animate-container { + .view-animate-container { + position:relative; + height:100px!important; position:relative; background:white; border:1px solid black; @@ -72,14 +74,12 @@ ngRouteModule.directive('ngView', ngViewFactory); overflow:hidden; } - .example-animate-container > div { + .view-animate { padding:10px; } - .view-example.ng-enter, .view-example.ng-leave { + .view-animate.ng-enter, .view-animate.ng-leave { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; - -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; - -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; display:block; @@ -94,20 +94,13 @@ ngRouteModule.directive('ngView', ngViewFactory); padding:10px; } - .example-animate-container { - position:relative; - height:100px; - } - - .view-example.ng-enter { + .view-animate.ng-enter { left:100%; } - .view-example.ng-enter.ng-enter-active { + .view-animate.ng-enter.ng-enter-active { left:0; } - - .view-example.ng-leave { } - .view-example.ng-leave.ng-leave-active { + .view-animate.ng-leave.ng-leave-active { left:-100%; } </file> |