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%;
}