Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
chore(docs): refactor/improve new CSS transition code in examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@matsko @IgorMinar
matsko authored and IgorMinar committed Nov 6, 2013
1 parent b1d4d58 commit aba0fe6
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 118 deletions.
15 changes: 3 additions & 12 deletions src/ng/directive/ngClass.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

This comment has been minimized.

Sign in to view

Copy link
@mgol

mgol Nov 7, 2013

Member

@matsko I don't think you wanted to remove that line. ;) At least it's present everywhere else, it should be consistent.

This comment has been minimized.

Sign in to view

Copy link
@matsko

matsko Nov 7, 2013

Author Contributor

Ahh right. Good catch!
-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() {
Expand Down
9 changes: 5 additions & 4 deletions src/ng/directive/ngIf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,11 @@
padding:10px;
}
/&#42;
The transition styles can also be placed on the CSS base class above
&#42;/
.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;
}
Expand All @@ -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>
Expand Down
20 changes: 9 additions & 11 deletions src/ng/directive/ngInclude.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -71,22 +71,20 @@
Content of template2.html
</file>
<file name="animations.css">
.example-animate-container {
.slide-animate-container {
position:relative;
background:white;
border:1px solid black;
height:40px;
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;
Expand All @@ -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>
Expand Down
40 changes: 13 additions & 27 deletions src/ng/directive/ngRepeat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
52 changes: 22 additions & 30 deletions src/ng/directive/ngShowHide.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
26 changes: 9 additions & 17 deletions src/ng/directive/ngSwitch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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;
Expand All @@ -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() {
Expand Down
27 changes: 10 additions & 17 deletions src/ngRoute/directive/ngView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down Expand Up @@ -64,22 +64,22 @@ 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;
height:40px;
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;
Expand All @@ -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>
Expand Down

0 comments on commit aba0fe6

Please sign in to comment.