fix auto-animations in firefox

This commit is contained in:
Hakim El Hattab 2020-02-13 09:55:33 +01:00
parent 1757aacaab
commit 1de733d21b
1 changed files with 15 additions and 9 deletions

View File

@ -3839,14 +3839,17 @@
*/ */
function autoAnimate( fromSlide, toSlide ) { function autoAnimate( fromSlide, toSlide ) {
// Lazily create the auto-animate stylesheet // Remove any existing auto-animate sheet. Recycling led to
if( !autoAnimateStyleSheet ) { // animations sometimes not trigger in FF.
if( autoAnimateStyleSheet && autoAnimateStyleSheet.parentNode ) {
autoAnimateStyleSheet.parentNode.removeChild( autoAnimateStyleSheet );
autoAnimateStyleSheet = null;
}
// Create a new auto-animate sheet
autoAnimateStyleSheet = document.createElement( 'style' ); autoAnimateStyleSheet = document.createElement( 'style' );
autoAnimateStyleSheet.type = 'text/css';
document.head.appendChild( autoAnimateStyleSheet ); document.head.appendChild( autoAnimateStyleSheet );
}
else {
autoAnimateStyleSheet.innerHTML = '';
}
// Clean up after prior animations // Clean up after prior animations
removeEphemeralAutoAnimateAttributes(); removeEphemeralAutoAnimateAttributes();
@ -3879,12 +3882,15 @@
css.push( '.reveal [data-auto-animate="running"] [data-auto-animate-unmatched] { transition: all '+ (slideOptions.duration*0.8) +'s ease '+ (slideOptions.duration*0.2) +'s; }' ); css.push( '.reveal [data-auto-animate="running"] [data-auto-animate-unmatched] { transition: all '+ (slideOptions.duration*0.8) +'s ease '+ (slideOptions.duration*0.2) +'s; }' );
} }
// Setting the whole chunk of CSS at once is the most
// efficient way to do this. Using sheet.insertRule
// is multiple factors slower.
autoAnimateStyleSheet.innerHTML = css.join( '' ); autoAnimateStyleSheet.innerHTML = css.join( '' );
// Start the animation next cycle // Start the animation next cycle
requestAnimationFrame( function() { setTimeout( function() {
toSlide.dataset.autoAnimate = 'running'; toSlide.dataset.autoAnimate = 'running';
} ); }, 2 );
} }