auto-animate works on vertically centered decks
This commit is contained in:
parent
8d89db32f6
commit
a3cd500154
2 changed files with 18 additions and 9 deletions
25
js/reveal.js
25
js/reveal.js
|
@ -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' );
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue