progress bar width set via scale instead of width for perf
This commit is contained in:
parent
5e49cbdcf7
commit
df61f9e1fa
17 changed files with 11 additions and 45 deletions
|
@ -567,10 +567,12 @@ $controlsArrowAngleActive: 36deg;
|
|||
.reveal .progress span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0px;
|
||||
width: 100%;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
|
|
|
@ -299,9 +299,6 @@
|
|||
background: rgba(0,0,0,0.2);
|
||||
color: $linkColor;
|
||||
}
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
|
|
4
dist/reveal.css
vendored
4
dist/reveal.css
vendored
File diff suppressed because one or more lines are too long
4
dist/reveal.esm.js
vendored
4
dist/reveal.esm.js
vendored
File diff suppressed because one or more lines are too long
4
dist/reveal.js
vendored
4
dist/reveal.js
vendored
File diff suppressed because one or more lines are too long
3
dist/theme/beige.css
vendored
3
dist/theme/beige.css
vendored
|
@ -281,9 +281,6 @@
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #8b743d; }
|
||||
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
|
|
3
dist/theme/black.css
vendored
3
dist/theme/black.css
vendored
|
@ -277,9 +277,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #42affa; }
|
||||
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
|
|
3
dist/theme/blood.css
vendored
3
dist/theme/blood.css
vendored
|
@ -280,9 +280,6 @@
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #a23; }
|
||||
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
|
|
3
dist/theme/league.css
vendored
3
dist/theme/league.css
vendored
|
@ -283,9 +283,6 @@
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #13DAEC; }
|
||||
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
|
|
3
dist/theme/moon.css
vendored
3
dist/theme/moon.css
vendored
|
@ -281,9 +281,6 @@ html * {
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #268bd2; }
|
||||
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
|
|
3
dist/theme/night.css
vendored
3
dist/theme/night.css
vendored
|
@ -275,9 +275,6 @@
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #e7ad52; }
|
||||
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
|
|
3
dist/theme/serif.css
vendored
3
dist/theme/serif.css
vendored
|
@ -277,9 +277,6 @@
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #51483D; }
|
||||
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
|
|
3
dist/theme/simple.css
vendored
3
dist/theme/simple.css
vendored
|
@ -280,9 +280,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #00008B; }
|
||||
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
|
|
3
dist/theme/sky.css
vendored
3
dist/theme/sky.css
vendored
|
@ -284,9 +284,6 @@
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #3b759e; }
|
||||
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
|
|
3
dist/theme/solarized.css
vendored
3
dist/theme/solarized.css
vendored
|
@ -281,9 +281,6 @@ html * {
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #268bd2; }
|
||||
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
|
|
3
dist/theme/white.css
vendored
3
dist/theme/white.css
vendored
|
@ -277,9 +277,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #2a76dd; }
|
||||
|
||||
.reveal .progress span {
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
|
|
|
@ -55,7 +55,7 @@ export default class Progress {
|
|||
// Update progress if enabled
|
||||
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() +')';
|
||||
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue