Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-16 23:30:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(docs): refactor/improve new CSS transition code in examples

Browse source
This commit is contained in:
Matias Niemelä 2013-11-05 20:19:45 -05:00 committed by Igor Minar
parent b1d4d580e5
commit aba0fe6830
7 changed files with 73 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/ng/directive/ngClass.js
View file

@ -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() {

9
src/ng/directive/ngIf.js
View file

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

20
src/ng/directive/ngInclude.js
View file

@ -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>

40
src/ng/directive/ngRepeat.js
View file

@ -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;
max-height:0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
line-height:20px;
opacity:1;
padding:10px;
max-height:40px;
}
.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 { }
.animate-repeat.ng-move.ng-move-active { }
</file>
<file name="scenario.js">
it('should render initial data set', function() {

56
src/ng/directive/ngShowHide.js
View file

@ -100,24 +100,9 @@
</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;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove {
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;
@ -125,6 +110,17 @@
background:white;
}
.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;
}
.check-element {
padding:10px;
border:1px solid black;
@ -253,24 +249,9 @@ 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;
}
.animate-hide.ng-hide-add.ng-hide-add-active,
.animate-hide.ng-hide-remove {
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;
@ -278,6 +259,17 @@ var ngShowDirective = ['$animate', function($animate) {
background:white;
}
.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;
}
.check-element {
padding:10px;
border:1px solid black;

26
src/ng/directive/ngSwitch.js
View file

@ -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() {

27
src/ngRoute/directive/ngView.js
View file

@ -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>