diff --git a/js/reveal.js b/js/reveal.js index 28fb35a..958ebae 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -3789,16 +3789,21 @@ if( config.autoAnimate ) { - var prevTargets = {}; + // If our slides are centered vertically, we need to + // account for their difference in position when + // calculating deltas for animated elements + var offsetY = config.center ? fromSlide.offsetTop - toSlide.offsetTop : 0; - toArray( fromSlide.querySelectorAll( '[data-id]' ) ).forEach( function( element ) { - prevTargets[ element.getAttribute( 'data-id' ) ] = element; + var fromTargets = {}; + + toArray( fromSlide.querySelectorAll( '[data-id]' ) ).forEach( function( fromElement ) { + fromTargets[ fromElement.getAttribute( 'data-id' ) ] = fromElement; } ); - toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( element ) { - var previousElement = prevTargets[ element.getAttribute( 'data-id' ) ]; - if( previousElement ) { - autoAnimateElement( previousElement, element ); + toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( toElement ) { + var fromElement = fromTargets[ toElement.getAttribute( 'data-id' ) ]; + if( fromElement ) { + autoAnimateElement( fromElement, toElement, offsetY ); } } ); @@ -3813,7 +3818,7 @@ * @param {HTMLElement} from * @param {HTMLElement} to */ - function autoAnimateElement( from, to ) { + function autoAnimateElement( from, to, offsetY ) { var fromProps = getAutoAnimatableProperties( from ), toProps = getAutoAnimatableProperties( to ); @@ -3825,6 +3830,10 @@ scaleY: fromProps.height / toProps.height }; + // Correction applied to account for varying vertical + // positions in decks with vertical centering + if( typeof offsetY === 'number' ) delta.y += offsetY; + to.style.transition = 'none'; to.style.transform = 'translate('+delta.x+'px, '+delta.y+'px) scale('+delta.scaleX+','+delta.scaleY+')'; to.classList.add( 'auto-animate-target' ); diff --git a/test/examples/auto-animate.html b/test/examples/auto-animate.html index 87293d3..646f562 100644 --- a/test/examples/auto-animate.html +++ b/test/examples/auto-animate.html @@ -22,7 +22,7 @@

Opacity 1.0

-

Opacity 0.2

+

Opacity 0.2