progress bar width set via scale instead of width for perf
This commit is contained in:
parent
5e49cbdcf7
commit
df61f9e1fa
|
@ -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
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
@ -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 New Issue