fix animations intermittently not triggering in firefox
parent
c38bc2c611
commit
f263f2819d
39
js/reveal.js
39
js/reveal.js
|
@ -3852,20 +3852,22 @@
|
||||||
*/
|
*/
|
||||||
function autoAnimate( fromSlide, toSlide ) {
|
function autoAnimate( fromSlide, toSlide ) {
|
||||||
|
|
||||||
// Remove any existing auto-animate sheet. Recycling led to
|
// Clean up after prior animations
|
||||||
// animations sometimes not trigger in FF.
|
removeEphemeralAutoAnimateAttributes();
|
||||||
|
|
||||||
if( autoAnimateStyleSheet && autoAnimateStyleSheet.parentNode ) {
|
if( autoAnimateStyleSheet && autoAnimateStyleSheet.parentNode ) {
|
||||||
autoAnimateStyleSheet.parentNode.removeChild( autoAnimateStyleSheet );
|
autoAnimateStyleSheet.parentNode.removeChild( autoAnimateStyleSheet );
|
||||||
autoAnimateStyleSheet = null;
|
autoAnimateStyleSheet = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create a new auto-animate sheet
|
// Ensure that both slides are auto-animate targets
|
||||||
autoAnimateStyleSheet = document.createElement( 'style' );
|
if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' ) ) {
|
||||||
autoAnimateStyleSheet.type = 'text/css';
|
|
||||||
document.head.appendChild( autoAnimateStyleSheet );
|
|
||||||
|
|
||||||
// Clean up after prior animations
|
// Create a new auto-animate sheet
|
||||||
removeEphemeralAutoAnimateAttributes();
|
autoAnimateStyleSheet = autoAnimateStyleSheet || document.createElement( 'style' );
|
||||||
|
autoAnimateStyleSheet.type = 'text/css';
|
||||||
|
autoAnimateStyleSheet.className = 'auto-animate-styes';
|
||||||
|
document.head.appendChild( autoAnimateStyleSheet );
|
||||||
|
|
||||||
var slideOptions = getAutoAnimateOptions( toSlide, {
|
var slideOptions = getAutoAnimateOptions( toSlide, {
|
||||||
|
|
||||||
|
@ -3876,11 +3878,9 @@
|
||||||
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// Set our starting state. Note that we may be coming from, or
|
// Set our starting state
|
||||||
// going to, a non-auto-animate slide so we only want to assign
|
fromSlide.dataset.autoAnimate = 'pending';
|
||||||
// this value is the attribute exists.
|
toSlide.dataset.autoAnimate = 'pending';
|
||||||
if( typeof fromSlide.dataset.autoAnimate === 'string' ) fromSlide.dataset.autoAnimate = 'pending';
|
|
||||||
if( typeof toSlide.dataset.autoAnimate === 'string' ) toSlide.dataset.autoAnimate = 'pending';
|
|
||||||
|
|
||||||
// Inject our auto-animate styles for this transition
|
// Inject our auto-animate styles for this transition
|
||||||
var css = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) {
|
var css = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) {
|
||||||
|
@ -3903,9 +3903,14 @@
|
||||||
autoAnimateStyleSheet.innerHTML = css.join( '' );
|
autoAnimateStyleSheet.innerHTML = css.join( '' );
|
||||||
|
|
||||||
// Start the animation next cycle
|
// Start the animation next cycle
|
||||||
setTimeout( function() {
|
requestAnimationFrame( function() {
|
||||||
if( typeof toSlide.dataset.autoAnimate === 'string' ) toSlide.dataset.autoAnimate = 'running';
|
// This forces our newly injected styles to be applied in Firefox
|
||||||
}, 2 );
|
getComputedStyle( autoAnimateStyleSheet ).fontWeight;
|
||||||
|
|
||||||
|
toSlide.dataset.autoAnimate = 'running';
|
||||||
|
} );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4076,7 +4081,7 @@
|
||||||
properties.height = element.offsetHeight;
|
properties.height = element.offsetHeight;
|
||||||
}
|
}
|
||||||
|
|
||||||
var computedStyles = window.getComputedStyle( element );
|
var computedStyles = getComputedStyle( element );
|
||||||
|
|
||||||
// CSS styles
|
// CSS styles
|
||||||
( elementOptions.styles || config.autoAnimateStyles ).forEach( function( style ) {
|
( elementOptions.styles || config.autoAnimateStyles ).forEach( function( style ) {
|
||||||
|
|
Loading…
Reference in New Issue