Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 17ce0a7

Browse files
jaspermdegrootjaspermdegroot
committed
Added unprefixed properties to transitions CSS for IE10 support.
1 parent a38792c commit 17ce0a7

12 files changed

+254
-41
lines changed

‎css/structure/jquery.mobile.transition.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,24 @@
1313
opacity: 0;
1414
}
1515
.in {
16+
-webkit-animation-fill-mode: both;
1617
-webkit-animation-timing-function: ease-out;
1718
-webkit-animation-duration: 350ms;
19+
-moz-animation-fill-mode: both;
1820
-moz-animation-timing-function: ease-out;
1921
-moz-animation-duration: 350ms;
22+
animation-fill-mode: both;
23+
animation-timing-function: ease-out;
24+
animation-duration: 350ms;
2025
}
2126
.out {
27+
-webkit-animation-fill-mode: both;
2228
-webkit-animation-timing-function: ease-in;
2329
-webkit-animation-duration: 225ms;
30+
-moz-animation-fill-mode: both;
2431
-moz-animation-timing-function: ease-in;
2532
-moz-animation-duration: 225ms;
33+
animation-fill-mode: both;
34+
animation-timing-function: ease-in;
35+
animation-duration: 225ms;
2636
}

‎css/structure/jquery.mobile.transition.fade.css‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,36 @@
22
from { opacity: 0; }
33
to { opacity: 1; }
44
}
5-
65
@-moz-keyframes fadein {
76
from { opacity: 0; }
87
to { opacity: 1; }
98
}
9+
@keyframes fadein {
10+
from { opacity: 0; }
11+
to { opacity: 1; }
12+
}
1013

1114
@-webkit-keyframes fadeout {
1215
from { opacity: 1; }
1316
to { opacity: 0; }
1417
}
15-
1618
@-moz-keyframes fadeout {
1719
from { opacity: 1; }
1820
to { opacity: 0; }
1921
}
22+
@keyframes fadeout {
23+
from { opacity: 1; }
24+
to { opacity: 0; }
25+
}
2026

2127
.fade.out {
2228
opacity: 0;
2329
-webkit-animation-duration: 125ms;
2430
-webkit-animation-name: fadeout;
2531
-moz-animation-duration: 125ms;
2632
-moz-animation-name: fadeout;
33+
animation-duration: 125ms;
34+
animation-name: fadeout;
2735
}
2836

2937
.fade.in {
@@ -32,4 +40,6 @@
3240
-webkit-animation-name: fadein;
3341
-moz-animation-duration: 225ms;
3442
-moz-animation-name: fadein;
43+
animation-duration: 225ms;
44+
animation-name: fadein;
3545
}

‎css/structure/jquery.mobile.transition.flip.css‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,16 @@
88
.viewport-flip {
99
-webkit-perspective: 1000;
1010
-moz-perspective: 1000;
11+
perspective: 1000;
1112
position: absolute;
1213
}
1314
.flip {
14-
-webkit-backface-visibility:hidden;
15-
-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
16-
-moz-backface-visibility:hidden;
17-
-moz-transform:translateX(0);
15+
-webkit-backface-visibility: hidden;
16+
-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
17+
-moz-backface-visibility: hidden;
18+
-moz-transform: translateX(0);
19+
backface-visibility: hidden;
20+
transform: translateX(0);
1821
}
1922

2023
.flip.out {
@@ -24,25 +27,33 @@
2427
-moz-transform: rotateY(-90deg) scale(.9);
2528
-moz-animation-name: flipouttoleft;
2629
-moz-animation-duration: 175ms;
30+
transform: rotateY(-90deg) scale(.9);
31+
animation-name: flipouttoleft;
32+
animation-duration: 175ms;
2733
}
2834

2935
.flip.in {
3036
-webkit-animation-name: flipintoright;
3137
-webkit-animation-duration: 225ms;
3238
-moz-animation-name: flipintoright;
3339
-moz-animation-duration: 225ms;
40+
animation-name: flipintoright;
41+
animation-duration: 225ms;
3442
}
3543

3644
.flip.out.reverse {
3745
-webkit-transform: rotateY(90deg) scale(.9);
3846
-webkit-animation-name: flipouttoright;
3947
-moz-transform: rotateY(90deg) scale(.9);
4048
-moz-animation-name: flipouttoright;
49+
transform: rotateY(90deg) scale(.9);
50+
animation-name: flipouttoright;
4151
}
4252

4353
.flip.in.reverse {
4454
-webkit-animation-name: flipintoleft;
4555
-moz-animation-name: flipintoleft;
56+
animation-name: flipintoleft;
4657
}
4758

4859
@-webkit-keyframes flipouttoleft {
@@ -53,6 +64,10 @@
5364
from { -moz-transform: rotateY(0); }
5465
to { -moz-transform: rotateY(-90deg) scale(.9); }
5566
}
67+
@keyframes flipouttoleft {
68+
from { transform: rotateY(0); }
69+
to { transform: rotateY(-90deg) scale(.9); }
70+
}
5671
@-webkit-keyframes flipouttoright {
5772
from { -webkit-transform: rotateY(0) ; }
5873
to { -webkit-transform: rotateY(90deg) scale(.9); }
@@ -61,6 +76,10 @@
6176
from { -moz-transform: rotateY(0); }
6277
to { -moz-transform: rotateY(90deg) scale(.9); }
6378
}
79+
@keyframes flipouttoright {
80+
from { transform: rotateY(0); }
81+
to { transform: rotateY(90deg) scale(.9); }
82+
}
6483
@-webkit-keyframes flipintoleft {
6584
from { -webkit-transform: rotateY(-90deg) scale(.9); }
6685
to { -webkit-transform: rotateY(0); }
@@ -69,11 +88,19 @@
6988
from { -moz-transform: rotateY(-90deg) scale(.9); }
7089
to { -moz-transform: rotateY(0); }
7190
}
91+
@keyframes flipintoleft {
92+
from { transform: rotateY(-90deg) scale(.9); }
93+
to { transform: rotateY(0); }
94+
}
7295
@-webkit-keyframes flipintoright {
7396
from { -webkit-transform: rotateY(90deg) scale(.9); }
7497
to { -webkit-transform: rotateY(0); }
7598
}
7699
@-moz-keyframes flipintoright {
77100
from { -moz-transform: rotateY(90deg) scale(.9); }
78101
to { -moz-transform: rotateY(0); }
79-
}
102+
}
103+
@keyframes flipintoright {
104+
from { transform: rotateY(90deg) scale(.9); }
105+
to { transform: rotateY(0); }
106+
}

‎css/structure/jquery.mobile.transition.flow.css‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
/* flow transition */
22
.flow {
33
-webkit-transform-origin: 50% 30%;
4-
-moz-transform-origin: 50% 30%;
54
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
5+
-moz-transform-origin: 50% 30%;
66
-moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
7+
transform-origin: 50% 30%;
8+
box-shadow: 0 0 20px rgba(0,0,0,.4);
79
}
810
.ui-dialog.flow {
911
-webkit-transform-origin: none;
10-
-moz-transform-origin: none;
1112
-webkit-box-shadow: none;
13+
-moz-transform-origin: none;
1214
-moz-box-shadow: none;
15+
transform-origin: none;
16+
box-shadow: none;
1317
}
1418
.flow.out {
1519
-webkit-transform: translateX(-100%) scale(.7);
@@ -20,6 +24,10 @@
2024
-moz-animation-name: flowouttoleft;
2125
-moz-animation-timing-function: ease;
2226
-moz-animation-duration: 350ms;
27+
transform: translateX(-100%) scale(.7);
28+
animation-name: flowouttoleft;
29+
animation-timing-function: ease;
30+
animation-duration: 350ms;
2331
}
2432

2533
.flow.in {
@@ -31,18 +39,25 @@
3139
-moz-animation-name: flowinfromright;
3240
-moz-animation-timing-function: ease;
3341
-moz-animation-duration: 350ms;
42+
transform: translateX(0) scale(1);
43+
animation-name: flowinfromright;
44+
animation-timing-function: ease;
45+
animation-duration: 350ms;
3446
}
3547

3648
.flow.out.reverse {
3749
-webkit-transform: translateX(100%);
3850
-webkit-animation-name: flowouttoright;
3951
-moz-transform: translateX(100%);
4052
-moz-animation-name: flowouttoright;
53+
transform: translateX(100%);
54+
animation-name: flowouttoright;
4155
}
4256

4357
.flow.in.reverse {
4458
-webkit-animation-name: flowinfromleft;
4559
-moz-animation-name: flowinfromleft;
60+
animation-name: flowinfromleft;
4661
}
4762

4863
@-webkit-keyframes flowouttoleft {
@@ -55,6 +70,11 @@
5570
60%, 70% { -moz-transform: translateX(0) scale(.7); }
5671
100% { -moz-transform: translateX(-100%) scale(.7); }
5772
}
73+
@keyframes flowouttoleft {
74+
0% { transform: translateX(0) scale(1); }
75+
60%, 70% { transform: translateX(0) scale(.7); }
76+
100% { transform: translateX(-100%) scale(.7); }
77+
}
5878

5979
@-webkit-keyframes flowouttoright {
6080
0% { -webkit-transform: translateX(0) scale(1); }
@@ -66,6 +86,11 @@
6686
60%, 70% { -moz-transform: translateX(0) scale(.7); }
6787
100% { -moz-transform: translateX(100%) scale(.7); }
6888
}
89+
@keyframes flowouttoright {
90+
0% { transform: translateX(0) scale(1); }
91+
60%, 70% { transform: translateX(0) scale(.7); }
92+
100% { transform: translateX(100%) scale(.7); }
93+
}
6994

7095
@-webkit-keyframes flowinfromleft {
7196
0% { -webkit-transform: translateX(-100%) scale(.7); }
@@ -77,6 +102,12 @@
77102
30%, 40% { -moz-transform: translateX(0) scale(.7); }
78103
100% { -moz-transform: translateX(0) scale(1); }
79104
}
105+
@keyframes flowinfromleft {
106+
0% { transform: translateX(-100%) scale(.7); }
107+
30%, 40% { transform: translateX(0) scale(.7); }
108+
100% { transform: translateX(0) scale(1); }
109+
}
110+
80111
@-webkit-keyframes flowinfromright {
81112
0% { -webkit-transform: translateX(100%) scale(.7); }
82113
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
@@ -86,4 +117,9 @@
86117
0% { -moz-transform: translateX(100%) scale(.7); }
87118
30%, 40% { -moz-transform: translateX(0) scale(.7); }
88119
100% { -moz-transform: translateX(0) scale(1); }
89-
}
120+
}
121+
@keyframes flowinfromright {
122+
0% { transform: translateX(100%) scale(.7); }
123+
30%, 40% { transform: translateX(0) scale(.7); }
124+
100% { transform: translateX(0) scale(1); }
125+
}

‎css/structure/jquery.mobile.transition.pop.css‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,45 @@
11
.pop {
22
-webkit-transform-origin: 50% 50%;
33
-moz-transform-origin: 50% 50%;
4+
transform-origin: 50% 50%;
45
}
56

67
.pop.in {
78
-webkit-transform: scale(1);
8-
-moz-transform: scale(1);
9-
opacity: 1;
109
-webkit-animation-name: popin;
11-
-moz-animation-name: popin;
1210
-webkit-animation-duration: 350ms;
11+
-moz-transform: scale(1);
12+
-moz-animation-name: popin;
1313
-moz-animation-duration: 350ms;
14+
transform: scale(1);
15+
animation-name: popin;
16+
animation-duration: 350ms;
17+
opacity: 1;
1418
}
1519

1620
.pop.out {
1721
-webkit-animation-name: fadeout;
18-
-moz-animation-name: fadeout;
19-
opacity: 0;
2022
-webkit-animation-duration: 100ms;
23+
-moz-animation-name: fadeout;
2124
-moz-animation-duration: 100ms;
25+
animation-name: fadeout;
26+
animation-duration: 100ms;
27+
opacity: 0;
2228
}
2329

2430
.pop.in.reverse {
2531
-webkit-animation-name: fadein;
2632
-moz-animation-name: fadein;
33+
animation-name: fadein;
2734
}
2835

2936
.pop.out.reverse {
3037
-webkit-transform: scale(.8);
31-
-moz-transform: scale(.8);
3238
-webkit-animation-name: popout;
39+
-moz-transform: scale(.8);
3340
-moz-animation-name: popout;
41+
transform: scale(.8);
42+
animation-name: popout;
3443
}
3544

3645
@-webkit-keyframes popin {
@@ -43,7 +52,6 @@
4352
opacity: 1;
4453
}
4554
}
46-
4755
@-moz-keyframes popin {
4856
from {
4957
-moz-transform: scale(.8);
@@ -54,6 +62,16 @@
5462
opacity: 1;
5563
}
5664
}
65+
@keyframes popin {
66+
from {
67+
transform: scale(.8);
68+
opacity: 0;
69+
}
70+
to {
71+
transform: scale(1);
72+
opacity: 1;
73+
}
74+
}
5775

5876
@-webkit-keyframes popout {
5977
from {
@@ -65,7 +83,6 @@
6583
opacity: 0;
6684
}
6785
}
68-
6986
@-moz-keyframes popout {
7087
from {
7188
-moz-transform: scale(1);
@@ -75,4 +92,14 @@
7592
-moz-transform: scale(.8);
7693
opacity: 0;
7794
}
78-
}
95+
}
96+
@keyframes popout {
97+
from {
98+
transform: scale(1);
99+
opacity: 1;
100+
}
101+
to {
102+
transform: scale(.8);
103+
opacity: 0;
104+
}
105+
}

0 commit comments

Comments
 (0)