progress bar width set via scale instead of width for perf

This commit is contained in:
Hakim El Hattab 2020-05-20 10:42:55 +02:00
parent 5e49cbdcf7
commit df61f9e1fa
17 changed files with 11 additions and 45 deletions

View File

@ -567,10 +567,12 @@ $controlsArrowAngleActive: 36deg;
.reveal .progress span { .reveal .progress span {
display: block; display: block;
height: 100%; height: 100%;
width: 0px; width: 100%;
background-color: currentColor; background-color: currentColor;
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transform-origin: 0 0;
transform: scaleX(0);
} }
/********************************************* /*********************************************

View File

@ -299,9 +299,6 @@
background: rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);
color: $linkColor; color: $linkColor;
} }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND

4
dist/reveal.css vendored

File diff suppressed because one or more lines are too long

4
dist/reveal.esm.js vendored

File diff suppressed because one or more lines are too long

4
dist/reveal.js vendored

File diff suppressed because one or more lines are too long

View File

@ -281,9 +281,6 @@
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #8b743d; } color: #8b743d; }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/

View File

@ -277,9 +277,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #42affa; } color: #42affa; }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/

View File

@ -280,9 +280,6 @@
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #a23; } color: #a23; }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/

View File

@ -283,9 +283,6 @@
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #13DAEC; } color: #13DAEC; }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/

3
dist/theme/moon.css vendored
View File

@ -281,9 +281,6 @@ html * {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #268bd2; } color: #268bd2; }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/

View File

@ -275,9 +275,6 @@
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #e7ad52; } color: #e7ad52; }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/

View File

@ -277,9 +277,6 @@
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #51483D; } color: #51483D; }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/

View File

@ -280,9 +280,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #00008B; } color: #00008B; }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/

3
dist/theme/sky.css vendored
View File

@ -284,9 +284,6 @@
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #3b759e; } color: #3b759e; }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/

View File

@ -281,9 +281,6 @@ html * {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #268bd2; } color: #268bd2; }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/

View File

@ -277,9 +277,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color: #2a76dd; } color: #2a76dd; }
.reveal .progress span {
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/********************************************* /*********************************************
* PRINT BACKGROUND * PRINT BACKGROUND
*********************************************/ *********************************************/

View File

@ -55,7 +55,7 @@ export default class Progress {
// Update progress if enabled // Update progress if enabled
if( this.Reveal.getConfig().progress && this.bar ) { if( this.Reveal.getConfig().progress && this.bar ) {
this.bar.style.width = this.Reveal.getProgress() * this.getMaxWidth() + 'px'; this.bar.style.transform = 'scaleX('+ this.Reveal.getProgress() +')';
} }