From aba0fe683040f753f60a0f8030777d94aa9f58bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Tue, 5 Nov 2013 20:19:45 -0500 Subject: [PATCH] chore(docs): refactor/improve new CSS transition code in examples --- src/ng/directive/ngClass.js | 15 ++-------- src/ng/directive/ngIf.js | 9 +++--- src/ng/directive/ngInclude.js | 20 ++++++------- src/ng/directive/ngRepeat.js | 40 +++++++++---------------- src/ng/directive/ngShowHide.js | 52 ++++++++++++++------------------- src/ng/directive/ngSwitch.js | 26 ++++++----------- 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 0dbac0024e67..ef03f4aba25f 100644 --- a/src/ng/directive/ngClass.js +++ b/src/ng/directive/ngClass.js @@ -160,26 +160,17 @@ function classDirective(name, selector) {
- Sample Text + Sample Text - .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; - } it('should check ng-class', function() { diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js index 78547f471f24..5ff889c2c857 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; } diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js index 13b472341530..f4b84fcf252a 100644 --- a/src/ng/directive/ngInclude.js +++ b/src/ng/directive/ngInclude.js @@ -51,8 +51,8 @@ url of the template: {{template.url}}
-
-
+
+
@@ -71,7 +71,7 @@ Content of template2.html - .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; } diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js index 9e5ad2f5a6ad..c7d0c005f0a8 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 { } it('should render initial data set', function() { diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js index 5b13a57bf428..a38a7e7af253 100644 --- a/src/ng/directive/ngShowHide.js +++ b/src/ng/directive/ngShowHide.js @@ -100,31 +100,27 @@ - .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) { - .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 b67aa904fc59..11ef7b71d5b8 100644 --- a/src/ng/directive/ngSwitch.js +++ b/src/ng/directive/ngSwitch.js @@ -54,9 +54,9 @@
-
Settings Div
-
Home Span
-
default
+
Settings Div
+
Home Span
+
default
 @@ -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; - } it('should start in settings', function() { diff --git a/src/ngRoute/directive/ngView.js b/src/ngRoute/directive/ngView.js index 3a296b5b1e44..00e047cad698 100644 --- a/src/ngRoute/directive/ngView.js +++ b/src/ngRoute/directive/ngView.js @@ -35,8 +35,8 @@ ngRouteModule.directive('ngView', ngViewFactory); Gatsby: Ch4 | Scarlet Letter
-
-
+
+
@@ -64,7 +64,9 @@ ngRouteModule.directive('ngView', ngViewFactory); - .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%; }