jan/revproxy-presentation
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

auto-animate works on vertically centered decks

Browse source
This commit is contained in:
Hakim El Hattab 2020-01-31 11:51:31 +01:00
parent 8d89db32f6
commit a3cd500154
2 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
js/reveal.js
View file

@ -3789,16 +3789,21 @@
if( config.autoAnimate ) { 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 ) { var fromTargets = {};
prevTargets[ element.getAttribute( 'data-id' ) ] = element;
toArray( fromSlide.querySelectorAll( '[data-id]' ) ).forEach( function( fromElement ) {
fromTargets[ fromElement.getAttribute( 'data-id' ) ] = fromElement;
} ); } );
toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( element ) { toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( toElement ) {
var previousElement = prevTargets[ element.getAttribute( 'data-id' ) ]; var fromElement = fromTargets[ toElement.getAttribute( 'data-id' ) ];
if( previousElement ) { if( fromElement ) {
autoAnimateElement( previousElement, element ); autoAnimateElement( fromElement, toElement, offsetY );
} }
} ); } );
@ -3813,7 +3818,7 @@
* @param {HTMLElement} from * @param {HTMLElement} from
* @param {HTMLElement} to * @param {HTMLElement} to
*/ */
function autoAnimateElement( from, to ) { function autoAnimateElement( from, to, offsetY ) {
var fromProps = getAutoAnimatableProperties( from ), var fromProps = getAutoAnimatableProperties( from ),
toProps = getAutoAnimatableProperties( to ); toProps = getAutoAnimatableProperties( to );
@ -3825,6 +3830,10 @@
scaleY: fromProps.height / toProps.height 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.transition = 'none';
to.style.transform = 'translate('+delta.x+'px, '+delta.y+'px) scale('+delta.scaleX+','+delta.scaleY+')'; to.style.transform = 'translate('+delta.x+'px, '+delta.y+'px) scale('+delta.scaleX+','+delta.scaleY+')';
to.classList.add( 'auto-animate-target' ); to.classList.add( 'auto-animate-target' );

2
test/examples/auto-animate.html
View file

@ -22,7 +22,7 @@
<h3 data-id="opacity-test">Opacity 1.0</h2> <h3 data-id="opacity-test">Opacity 1.0</h2>
</section> </section>
<section data-auto-animate> <section data-auto-animate>
<h3 data-id="opacity-test" style="opacity: 0.2;">Opacity 0.2</h2> <h3 data-id="opacity-test" style="opacity: 0.2; margin-top: 200px;">Opacity 0.2</h2>
</section> </section>
<section data-auto-animate style="height: 600px"> <section data-auto-animate style="height: 600px">