Skip to content

Commit b7ad4f5

Browse files
zackbloomzackbloom
committed
Add width transitions to the themes to smooth updates if the framerate of the animation is too low.
1 parent d5c702f commit b7ad4f5

12 files changed

Lines changed: 64 additions & 4 deletions

‎templates/pace-theme-barber-shop.tmpl.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@
1818
left: 0;
1919
height: 12px;
2020
overflow: hidden;
21+
22+
-webkit-transition: width 1s;
23+
-moz-transition: width 1s;
24+
-o-transition: width 1s;
25+
transition: width 1s;
2126
}
2227

2328
.pace .pace-progress-inner {

‎templates/pace-theme-fill-left.tmpl.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,9 @@
1313
top: 0;
1414
left: 0;
1515
bottom: 0;
16+
17+
-webkit-transition: width 1s;
18+
-moz-transition: width 1s;
19+
-o-transition: width 1s;
20+
transition: width 1s;
1621
}

‎templates/pace-theme-flash.tmpl.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@
1717
top: 0;
1818
left: 0;
1919
height: 2px;
20+
21+
-webkit-transition: width 1s;
22+
-moz-transition: width 1s;
23+
-o-transition: width 1s;
24+
transition: width 1s;
2025
}
2126

2227
.pace .pace-progress-inner {

‎templates/pace-theme-flat-top.tmpl.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,13 @@
1414
left: 0;
1515
height: 12px;
1616
background: `args.color || "#29d"`;
17-
-webkit-transition: -webkit-transform 0.3s;
18-
transition: transform 0.3s;
17+
18+
-webkit-transition: -webkit-transform 0.3s, width 1s;
19+
transition: transform 0.3s, width 1s;
20+
1921
-webkit-transform: translateY(-50px);
2022
transform: translateY(-50px);
23+
2124
pointer-events: none;
2225
}
2326

‎templates/pace-theme-mac-osx.tmpl.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,21 @@
2020
left: 0;
2121
height: 12px;
2222
overflow: hidden;
23+
2324
-webkit-border-radius: 0 0 4px 0;
2425
-moz-border-radius: 0 0 4px 0;
2526
-o-border-radius: 0 0 4px 0;
2627
border-radius: 0 0 4px 0;
28+
2729
-webkit-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
2830
-moz-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
2931
-o-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
3032
box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
33+
34+
-webkit-transition: width 1s;
35+
-moz-transition: width 1s;
36+
-o-transition: width 1s;
37+
transition: width 1s;
3138
}
3239

3340
.pace .pace-progress-inner {

‎templates/pace-theme-minimal.tmpl.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55
top: 0;
66
left: 0;
77
height: 2px;
8+
9+
-webkit-transition: width 1s;
10+
-moz-transition: width 1s;
11+
-o-transition: width 1s;
12+
transition: width 1s;
813
}
914

1015
.pace-inactive {

‎themes/pace-theme-barber-shop.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@
1919
left: 0;
2020
height: 12px;
2121
overflow: hidden;
22+
23+
-webkit-transition: width 1s;
24+
-moz-transition: width 1s;
25+
-o-transition: width 1s;
26+
transition: width 1s;
2227
}
2328

2429
.pace .pace-progress-inner {

‎themes/pace-theme-fill-left.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,9 @@
1414
top: 0;
1515
left: 0;
1616
bottom: 0;
17+
18+
-webkit-transition: width 1s;
19+
-moz-transition: width 1s;
20+
-o-transition: width 1s;
21+
transition: width 1s;
1722
}

‎themes/pace-theme-flash.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@
1818
top: 0;
1919
left: 0;
2020
height: 2px;
21+
22+
-webkit-transition: width 1s;
23+
-moz-transition: width 1s;
24+
-o-transition: width 1s;
25+
transition: width 1s;
2126
}
2227

2328
.pace .pace-progress-inner {

‎themes/pace-theme-flat-top.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,13 @@
1515
left: 0;
1616
height: 12px;
1717
background: #29d;
18-
-webkit-transition: -webkit-transform 0.3s;
19-
transition: transform 0.3s;
18+
19+
-webkit-transition: -webkit-transform 0.3s, width 1s;
20+
transition: transform 0.3s, width 1s;
21+
2022
-webkit-transform: translateY(-50px);
2123
transform: translateY(-50px);
24+
2225
pointer-events: none;
2326
}
2427

0 commit comments

Comments
 (0)