Skip to content

Commit aba0fe6

Browse files
matskoIgorMinar
matsko
authored and
IgorMinar
committed
chore(docs): refactor/improve new CSS transition code in examples
1 parent b1d4d58 commit aba0fe6

7 files changed

Lines changed: 71 additions & 118 deletions

File tree

‎src/ng/directive/ngClass.js‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -160,26 +160,17 @@ function classDirective(name, selector) {
160160
<input type="button" value="set" ng-click="myVar='my-class'">
161161
<input type="button" value="clear" ng-click="myVar=''">
162162
<br>
163-
<span ng-class="myVar">Sample Text</span>
163+
<span class="base-class" ng-class="myVar">Sample Text</span>
164164
</file>
165165
<file name="style.css">
166-
.my-class-add, .my-class-remove {
167-
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
168-
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
169-
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
166+
.base-class {
170167
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
171168
}
172169
173-
.my-class,
174-
.my-class-add.my-class-add-active {
170+
.base-class.my-class {
175171
color: red;
176172
font-size:3em;
177173
}
178-
179-
.my-class-remove.my-class-remove-active {
180-
font-size:1.0em;
181-
color:black;
182-
}
183174
</file>
184175
<file name="scenario.js">
185176
it('should check ng-class', function() {

‎src/ng/directive/ngIf.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,11 @@
5959
padding:10px;
6060
}
6161
62+
/&#42;
63+
The transition styles can also be placed on the CSS base class above
64+
&#42;/
6265
.animate-if.ng-enter, .animate-if.ng-leave {
6366
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
64-
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
65-
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
6667
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
6768
}
6869
@@ -71,8 +72,8 @@
7172
opacity:0;
7273
}
7374
74-
.animate-if.ng-enter.ng-enter-active,
75-
.animate-if.ng-leave {
75+
.animate-if.ng-leave,
76+
.animate-if.ng-enter.ng-enter-active {
7677
opacity:1;
7778
}
7879
</file>

‎src/ng/directive/ngInclude.js‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@
5151
</select>
5252
url of the template: <tt>{{template.url}}</tt>
5353
<hr/>
54-
<div class="example-animate-container">
55-
<div class="include-example" ng-include="template.url"></div>
54+
<div class="slide-animate-container">
55+
<div class="slide-animate" ng-include="template.url"></div>
5656
</div>
5757
</div>
5858
</file>
@@ -71,22 +71,20 @@
7171
Content of template2.html
7272
</file>
7373
<file name="animations.css">
74-
.example-animate-container {
74+
.slide-animate-container {
7575
position:relative;
7676
background:white;
7777
border:1px solid black;
7878
height:40px;
7979
overflow:hidden;
8080
}
8181
82-
.example-animate-container > div {
82+
.slide-animate {
8383
padding:10px;
8484
}
8585
86-
.include-example.ng-enter, .include-example.ng-leave {
86+
.slide-animate.ng-enter, .slide-animate.ng-leave {
8787
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
88-
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
89-
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
9088
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
9189
9290
position:absolute;
@@ -98,17 +96,17 @@
9896
padding:10px;
9997
}
10098
101-
.include-example.ng-enter {
99+
.slide-animate.ng-enter {
102100
top:-50px;
103101
}
104-
.include-example.ng-enter.ng-enter-active {
102+
.slide-animate.ng-enter.ng-enter-active {
105103
top:0;
106104
}
107105
108-
.include-example.ng-leave {
106+
.slide-animate.ng-leave {
109107
top:0;
110108
}
111-
.include-example.ng-leave.ng-leave-active {
109+
.slide-animate.ng-leave.ng-leave-active {
112110
top:50px;
113111
}
114112
</file>

‎src/ng/directive/ngRepeat.js‎

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -140,49 +140,35 @@
140140
border:1px solid black;
141141
list-style:none;
142142
margin:0;
143-
padding:0;
143+
padding:0 10px;
144144
}
145145
146-
.example-animate-container > li {
147-
padding:10px;
146+
.animate-repeat {
147+
line-height:40px;
148148
list-style:none;
149+
box-sizing:border-box;
149150
}
150151
152+
.animate-repeat.ng-move,
151153
.animate-repeat.ng-enter,
152-
.animate-repeat.ng-leave,
153-
.animate-repeat.ng-move {
154+
.animate-repeat.ng-leave {
154155
-webkit-transition:all linear 0.5s;
155-
-moz-transition:all linear 0.5s;
156-
-o-transition:all linear 0.5s;
157156
transition:all linear 0.5s;
158157
}
159158
159+
.animate-repeat.ng-leave.ng-leave-active,
160+
.animate-repeat.ng-move,
160161
.animate-repeat.ng-enter {
161-
line-height:0;
162162
opacity:0;
163-
padding-top:0;
164-
padding-bottom:0;
165-
}
166-
.animate-repeat.ng-enter.ng-enter-active {
167-
line-height:20px;
168-
opacity:1;
169-
padding:10px;
163+
max-height:0;
170164
}
171165
172-
.animate-repeat.ng-leave {
166+
.animate-repeat.ng-leave,
167+
.animate-repeat.ng-move.ng-move-active,
168+
.animate-repeat.ng-enter.ng-enter-active {
173169
opacity:1;
174-
line-height:20px;
175-
padding:10px;
170+
max-height:40px;
176171
}
177-
.animate-repeat.ng-leave.ng-leave-active {
178-
opacity:0;
179-
line-height:0;
180-
padding-top:0;
181-
padding-bottom:0;
182-
}
183-
184-
.animate-repeat.ng-move { }
185-
.animate-repeat.ng-move.ng-move-active { }
186172
</file>
187173
<file name="scenario.js">
188174
it('should render initial data set', function() {

‎src/ng/directive/ngShowHide.js‎

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -100,31 +100,27 @@
100100
</div>
101101
</file>
102102
<file name="animations.css">
103-
.animate-show.ng-hide-add,
104-
.animate-show.ng-hide-remove {
103+
.animate-show {
105104
-webkit-transition:all linear 0.5s;
106-
-moz-transition:all linear 0.5s;
107-
-o-transition:all linear 0.5s;
108105
transition:all linear 0.5s;
109-
display:block!important;
106+
line-height:20px;
107+
opacity:1;
108+
padding:10px;
109+
border:1px solid black;
110+
background:white;
110111
}
111112
112-
.animate-show.ng-hide-add.ng-hide-add-active,
113+
.animate-show.ng-hide-add,
113114
.animate-show.ng-hide-remove {
115+
display:block!important;
116+
}
117+
118+
.animate-show.ng-hide {
114119
line-height:0;
115120
opacity:0;
116121
padding:0 10px;
117122
}
118123
119-
.animate-show.ng-hide-add,
120-
.animate-show.ng-hide-remove.ng-hide-remove-active {
121-
line-height:20px;
122-
opacity:1;
123-
padding:10px;
124-
border:1px solid black;
125-
background:white;
126-
}
127-
128124
.check-element {
129125
padding:10px;
130126
border:1px solid black;
@@ -253,31 +249,27 @@ var ngShowDirective = ['$animate', function($animate) {
253249
</div>
254250
</file>
255251
<file name="animations.css">
256-
.animate-hide.ng-hide-add,
257-
.animate-hide.ng-hide-remove {
252+
.animate-hide {
258253
-webkit-transition:all linear 0.5s;
259-
-moz-transition:all linear 0.5s;
260-
-o-transition:all linear 0.5s;
261254
transition:all linear 0.5s;
262-
display:block!important;
255+
line-height:20px;
256+
opacity:1;
257+
padding:10px;
258+
border:1px solid black;
259+
background:white;
263260
}
264261
265-
.animate-hide.ng-hide-add.ng-hide-add-active,
262+
.animate-hide.ng-hide-add,
266263
.animate-hide.ng-hide-remove {
264+
display:block!important;
265+
}
266+
267+
.animate-hide.ng-hide {
267268
line-height:0;
268269
opacity:0;
269270
padding:0 10px;
270271
}
271272
272-
.animate-hide.ng-hide-add,
273-
.animate-hide.ng-hide-remove.ng-hide-remove-active {
274-
line-height:20px;
275-
opacity:1;
276-
padding:10px;
277-
border:1px solid black;
278-
background:white;
279-
}
280-
281273
.check-element {
282274
padding:10px;
283275
border:1px solid black;

‎src/ng/directive/ngSwitch.js‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,9 @@
5454
<hr/>
5555
<div class="animate-switch-container"
5656
ng-switch on="selection">
57-
<div ng-switch-when="settings">Settings Div</div>
58-
<div ng-switch-when="home">Home Span</div>
59-
<div ng-switch-default>default</div>
57+
<div class="animate-switch" ng-switch-when="settings">Settings Div</div>
58+
<div class="animate-switch" ng-switch-when="home">Home Span</div>
59+
<div class="animate-switch" ng-switch-default>default</div>
6060
</div>
6161
</div>
6262
</file>
@@ -75,15 +75,12 @@
7575
overflow:hidden;
7676
}
7777
78-
.animate-switch-container > div {
78+
.animate-switch {
7979
padding:10px;
8080
}
8181
82-
.animate-switch-container > .ng-enter,
83-
.animate-switch-container > .ng-leave {
82+
.animate-switch.ng-animate {
8483
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
85-
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
86-
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
8784
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
8885
8986
position:absolute;
@@ -93,19 +90,14 @@
9390
bottom:0;
9491
}
9592
96-
.animate-switch-container > .ng-enter {
93+
.animate-switch.ng-leave.ng-leave-active,
94+
.animate-switch.ng-enter {
9795
top:-50px;
9896
}
99-
.animate-switch-container > .ng-enter.ng-enter-active {
97+
.animate-switch.ng-leave,
98+
.animate-switch.ng-enter.ng-enter-active {
10099
top:0;
101100
}
102-
103-
.animate-switch-container > .ng-leave {
104-
top:0;
105-
}
106-
.animate-switch-container > .ng-leave.ng-leave-active {
107-
top:50px;
108-
}
109101
</file>
110102
<file name="scenario.js">
111103
it('should start in settings', function() {

‎src/ngRoute/directive/ngView.js‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ ngRouteModule.directive('ngView', ngViewFactory);
3535
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
3636
<a href="Book/Scarlet">Scarlet Letter</a><br/>
3737
38-
<div class="example-animate-container">
39-
<div ng-view class="view-example"></div>
38+
<div class="view-animate-container">
39+
<div ng-view class="view-animate"></div>
4040
</div>
4141
<hr />
4242
@@ -64,22 +64,22 @@ ngRouteModule.directive('ngView', ngViewFactory);
6464
</file>
6565
6666
<file name="animations.css">
67-
.example-animate-container {
67+
.view-animate-container {
68+
position:relative;
69+
height:100px!important;
6870
position:relative;
6971
background:white;
7072
border:1px solid black;
7173
height:40px;
7274
overflow:hidden;
7375
}
7476
75-
.example-animate-container > div {
77+
.view-animate {
7678
padding:10px;
7779
}
7880
79-
.view-example.ng-enter, .view-example.ng-leave {
81+
.view-animate.ng-enter, .view-animate.ng-leave {
8082
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
81-
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
82-
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
8383
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
8484
8585
display:block;
@@ -94,20 +94,13 @@ ngRouteModule.directive('ngView', ngViewFactory);
9494
padding:10px;
9595
}
9696
97-
.example-animate-container {
98-
position:relative;
99-
height:100px;
100-
}
101-
102-
.view-example.ng-enter {
97+
.view-animate.ng-enter {
10398
left:100%;
10499
}
105-
.view-example.ng-enter.ng-enter-active {
100+
.view-animate.ng-enter.ng-enter-active {
106101
left:0;
107102
}
108-
109-
.view-example.ng-leave { }
110-
.view-example.ng-leave.ng-leave-active {
103+
.view-animate.ng-leave.ng-leave-active {
111104
left:-100%;
112105
}
113106
</file>

0 commit comments

Comments
 (0)