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

Commit 11f712b

Browse files
matskomhevery
matsko
authored and
mhevery
committed
chore(ngAnimate): CSS classes X-setup/X-start -> X/X-active
BREAKING CHANGE: css classes foo-setup/foo-start become foo/foo-active The CSS transition classes have changed suffixes. To migrate rename .foo-setup {...} to .foo {...} .foo-start {...} to .foo-active {...} or for type: enter, leave, move, show, hide .foo-type-setup {...} to .foo-type {...} .foo-type-start {...} to .foo-type-active {...}
1 parent 1475787 commit 11f712b

File tree

14 files changed

+127
-128
lines changed

14 files changed

+127
-128
lines changed

‎docs/src/templates/css/animations.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
.reveal-setup {
1+
.reveal {
22
-webkit-transition:1s linear all;
33
-moz-transition:1s linear all;
44
-o-transition:1s linear all;
55
transition:1s linear all;
66

77
opacity:0;
88
}
9-
.reveal-setup.reveal-start {
9+
.reveal.reveal-active {
1010
opacity:1;
1111
}
1212

@@ -15,7 +15,7 @@
1515
overflow:hidden;
1616
}
1717

18-
.slide-reveal-setup {
18+
.slide-reveal {
1919
-webkit-transition:0.5s linear all;
2020
-moz-transition:0.5s linear all;
2121
-o-transition:0.5s linear all;
@@ -26,12 +26,12 @@
2626
opacity:0;
2727
top:10px;
2828
}
29-
.slide-reveal-setup.slide-reveal-start {
29+
.slide-reveal.slide-reveal-active {
3030
top:0;
3131
opacity:1;
3232
}
3333

34-
.expand-enter-setup {
34+
.expand-enter {
3535
-webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
3636
-moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
3737
-o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
@@ -41,13 +41,13 @@
4141
line-height:0;
4242
height:0!important;
4343
}
44-
.expand-enter-setup.expand-enter-start {
44+
.expand-enter.expand-enter-active {
4545
opacity:1;
4646
line-height:20px;
4747
height:20px!important;
4848
}
4949

50-
.expand-leave-setup {
50+
.expand-leave {
5151
-webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
5252
-moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
5353
-o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
@@ -56,7 +56,7 @@
5656
opacity:1;
5757
height:20px;
5858
}
59-
.expand-leave-setup.expand-leave-start {
59+
.expand-leave.expand-leave-active {
6060
opacity:0;
6161
height:0;
6262
}

‎src/ng/animator.js

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
* The animate-enter CSS class is the event name that you
5959
* have provided within the ngAnimate attribute.
6060
* */
61-
* .animate-enter-setup {
61+
* .animate-enter {
6262
* -webkit-transition: 1s linear all; /* Safari/Chrome */
6363
* -moz-transition: 1s linear all; /* Firefox */
6464
* -ms-transition: 1s linear all; /* IE10 */
@@ -74,7 +74,7 @@
7474
* classes together to avoid any CSS-specificity
7575
* conflicts
7676
* */
77-
* .animate-enter-setup.animate-enter-start {
77+
* .animate-enter.animate-enter-active {
7878
* /* The animation code itself */
7979
* opacity: 1;
8080
* }
@@ -87,7 +87,7 @@
8787
*
8888
* <pre>
8989
* <style type="text/css">
90-
* .animate-enter-setup {
90+
* .animate-enter {
9191
* -webkit-animation: enter_sequence 1s linear;
9292
* -moz-animation: enter_sequence 1s linear;
9393
* -o-animation: enter_sequence 1s linear;
@@ -116,8 +116,8 @@
116116
*
117117
* ngAnimate will first examine any CSS animation code and then fallback to using CSS transitions.
118118
*
119-
* Upon DOM mutation, the setup class is added first, then the browser is allowed to reflow the content and then,
120-
* the start class is added to trigger the animation. The ngAnimate directive will automatically extract the duration
119+
* Upon DOM mutation, the event class is added first, then the browser is allowed to reflow the content and then,
120+
* the active class is added to trigger the animation. The ngAnimate directive will automatically extract the duration
121121
* of the animation to determine when the animation ends. Once the animation is over then both CSS classes will be
122122
* removed from the DOM. If a browser does not support CSS transitions or CSS animations then the animation will start and end
123123
* immediately resulting in a DOM element that is at it's final state. This final state is when the DOM element
@@ -270,8 +270,7 @@ var $AnimatorProvider = function() {
270270
beforeFn(element, parent, after);
271271
afterFn(element, parent, after);
272272
} else {
273-
var setupClass = className + '-setup';
274-
var startClass = className + '-start';
273+
var activeClassName = className + '-active';
275274

276275
if (!parent) {
277276
parent = after ? after.parent() : element.parent();
@@ -284,7 +283,7 @@ var $AnimatorProvider = function() {
284283
}
285284

286285
element.data(NG_ANIMATE_CONTROLLER, {running:true});
287-
element.addClass(setupClass);
286+
element.addClass(className);
288287
beforeFn(element, parent, after);
289288
if (element.length == 0) return done();
290289

@@ -304,7 +303,7 @@ var $AnimatorProvider = function() {
304303
};
305304

306305
function beginAnimation() {
307-
element.addClass(startClass);
306+
element.addClass(activeClassName);
308307
if (polyfillStart) {
309308
polyfillStart(element, done, memento);
310309
} else if (isFunction($window.getComputedStyle)) {
@@ -357,8 +356,8 @@ var $AnimatorProvider = function() {
357356

358357
function done() {
359358
afterFn(element, parent, after);
360-
element.removeClass(setupClass);
361-
element.removeClass(startClass);
359+
element.removeClass(className);
360+
element.removeClass(activeClassName);
362361
element.removeData(NG_ANIMATE_CONTROLLER);
363362
}
364363
}

‎src/ng/directive/ngInclude.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@
6161
<div>Content of template2.html</div>
6262
</file>
6363
<file name="animations.css">
64-
.example-leave-setup,
65-
.example-enter-setup {
64+
.example-leave,
65+
.example-enter {
6666
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
6767
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
6868
-ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
@@ -81,17 +81,17 @@
8181
padding:10px;
8282
}
8383
84-
.example-enter-setup {
84+
.example-enter {
8585
top:-50px;
8686
}
87-
.example-enter-setup.example-enter-start {
87+
.example-enter.example-enter-active {
8888
top:0;
8989
}
9090
91-
.example-leave-setup {
91+
.example-leave {
9292
top:0;
9393
}
94-
.example-leave-setup.example-leave-start {
94+
.example-leave.example-leave-active {
9595
top:50px;
9696
}
9797
</file>

‎src/ng/directive/ngRepeat.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -88,36 +88,36 @@
8888
</div>
8989
</file>
9090
<file name="animations.css">
91-
.example-repeat-enter-setup,
92-
.example-repeat-leave-setup,
93-
.example-repeat-move-setup {
91+
.example-repeat-enter,
92+
.example-repeat-leave,
93+
.example-repeat-move {
9494
-webkit-transition:all linear 0.5s;
9595
-moz-transition:all linear 0.5s;
9696
-ms-transition:all linear 0.5s;
9797
-o-transition:all linear 0.5s;
9898
transition:all linear 0.5s;
9999
}
100100
101-
.example-repeat-enter-setup {
101+
.example-repeat-enter {
102102
line-height:0;
103103
opacity:0;
104104
}
105-
.example-repeat-enter-setup.example-repeat-enter-start {
105+
.example-repeat-enter.example-repeat-enter-active {
106106
line-height:20px;
107107
opacity:1;
108108
}
109109
110-
.example-repeat-leave-setup {
110+
.example-repeat-leave {
111111
opacity:1;
112112
line-height:20px;
113113
}
114-
.example-repeat-leave-setup.example-repeat-leave-start {
114+
.example-repeat-leave.example-repeat-leave-active {
115115
opacity:0;
116116
line-height:0;
117117
}
118118
119-
.example-repeat-move-setup { }
120-
.example-repeat-move-setup.example-repeat-move-start { }
119+
.example-repeat-move { }
120+
.example-repeat-move.example-repeat-move-active { }
121121
</file>
122122
<file name="scenario.js">
123123
it('should render initial data set', function() {

‎src/ng/directive/ngShowHide.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,35 +45,35 @@
4545
</div>
4646
</file>
4747
<file name="animations.css">
48-
.example-show-setup, .example-hide-setup {
48+
.example-show, .example-hide {
4949
-webkit-transition:all linear 0.5s;
5050
-moz-transition:all linear 0.5s;
5151
-ms-transition:all linear 0.5s;
5252
-o-transition:all linear 0.5s;
5353
transition:all linear 0.5s;
5454
}
5555
56-
.example-show-setup {
56+
.example-show {
5757
line-height:0;
5858
opacity:0;
5959
padding:0 10px;
6060
}
61-
.example-show-start.example-show-start {
61+
.example-show-active.example-show-active {
6262
line-height:20px;
6363
opacity:1;
6464
padding:10px;
6565
border:1px solid black;
6666
background:white;
6767
}
6868
69-
.example-hide-setup {
69+
.example-hide {
7070
line-height:20px;
7171
opacity:1;
7272
padding:10px;
7373
border:1px solid black;
7474
background:white;
7575
}
76-
.example-hide-start.example-hide-start {
76+
.example-hide-active.example-hide-active {
7777
line-height:0;
7878
opacity:0;
7979
padding:0 10px;
@@ -154,35 +154,35 @@ var ngShowDirective = ['$animator', function($animator) {
154154
</div>
155155
</file>
156156
<file name="animations.css">
157-
.example-show-setup, .example-hide-setup {
157+
.example-show, .example-hide {
158158
-webkit-transition:all linear 0.5s;
159159
-moz-transition:all linear 0.5s;
160160
-ms-transition:all linear 0.5s;
161161
-o-transition:all linear 0.5s;
162162
transition:all linear 0.5s;
163163
}
164164
165-
.example-show-setup {
165+
.example-show {
166166
line-height:0;
167167
opacity:0;
168168
padding:0 10px;
169169
}
170-
.example-show-start.example-show-start {
170+
.example-show.example-show-active {
171171
line-height:20px;
172172
opacity:1;
173173
padding:10px;
174174
border:1px solid black;
175175
background:white;
176176
}
177177
178-
.example-hide-setup {
178+
.example-hide {
179179
line-height:20px;
180180
opacity:1;
181181
padding:10px;
182182
border:1px solid black;
183183
background:white;
184184
}
185-
.example-hide-start.example-hide-start {
185+
.example-hide.example-hide-active {
186186
line-height:0;
187187
opacity:0;
188188
padding:0 10px;

‎src/ng/directive/ngSwitch.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
}
7272
</file>
7373
<file name="animations.css">
74-
.example-leave-setup, .example-enter-setup {
74+
.example-leave, .example-enter {
7575
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
7676
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
7777
-ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
@@ -90,17 +90,17 @@
9090
padding:10px;
9191
}
9292
93-
.example-enter-setup {
93+
.example-enter {
9494
top:-50px;
9595
}
96-
.example-enter-start.example-enter-start {
96+
.example-enter.example-enter-active {
9797
top:0;
9898
}
9999
100-
.example-leave-setup {
100+
.example-leave {
101101
top:0;
102102
}
103-
.example-leave-start.example-leave-start {
103+
.example-leave.example-leave-active {
104104
top:50px;
105105
}
106106
</file>

‎src/ng/directive/ngView.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
</file>
6262
6363
<file name="animations.css">
64-
.example-leave-setup, .example-enter-setup {
64+
.example-leave, .example-enter {
6565
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
6666
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
6767
-ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
@@ -87,15 +87,15 @@
8787
padding:10px;
8888
}
8989
90-
.example-enter-setup {
90+
.example-enter {
9191
left:100%;
9292
}
93-
.example-enter-setup.example-enter-start {
93+
.example-enter.example-enter-active {
9494
left:0;
9595
}
9696
97-
.example-leave-setup { }
98-
.example-leave-setup.example-leave-start {
97+
.example-leave { }
98+
.example-leave.example-leave-active {
9999
left:-100%;
100100
}
101101
</file>

0 commit comments

Comments
 (0)