switch to bounding rect for auto-animate deltas

This commit is contained in:
Hakim El Hattab 2020-02-17 13:14:46 +01:00
parent ac59dcb525
commit 4ff7fd3a71
4 changed files with 50 additions and 43 deletions

View File

@ -1045,6 +1045,10 @@ body {
.reveal .slides.disable-slide-transitions section { .reveal .slides.disable-slide-transitions section {
transition: none !important; } transition: none !important; }
.reveal .slides.disable-slide-transitions section {
-webkit-transform: none !important;
transform: none !important; }
/********************************************* /*********************************************
* PER-SLIDE BACKGROUNDS * PER-SLIDE BACKGROUNDS
*********************************************/ *********************************************/

View File

@ -1123,6 +1123,10 @@ $controlsArrowAngleActive: 36deg;
transition: none !important; transition: none !important;
} }
.reveal .slides.disable-slide-transitions section {
transform: none !important;
}
/********************************************* /*********************************************
* PER-SLIDE BACKGROUNDS * PER-SLIDE BACKGROUNDS

View File

@ -3868,14 +3868,7 @@
autoAnimateStyleSheet.type = 'text/css'; autoAnimateStyleSheet.type = 'text/css';
document.head.appendChild( autoAnimateStyleSheet ); document.head.appendChild( autoAnimateStyleSheet );
var slideOptions = getAutoAnimateOptions( toSlide, { var animationOptions = getAutoAnimateOptions( toSlide );
// If our slides are centered vertically, we need to
// account for their difference in position when
// calculating deltas for animated elements
offsetY: config.center ? fromSlide.offsetTop - toSlide.offsetTop : 0
} );
// Set our starting state // Set our starting state
fromSlide.dataset.autoAnimate = 'pending'; fromSlide.dataset.autoAnimate = 'pending';
@ -3883,7 +3876,7 @@
// 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 ) {
return getAutoAnimateCSS( elements.from, elements.to, elements.options || {}, slideOptions, autoAnimateCounter++ ); return getAutoAnimateCSS( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ );
} ); } );
// If the slide is configured to animate unmatched elements we // If the slide is configured to animate unmatched elements we
@ -3893,7 +3886,7 @@
unmatchedElement.dataset.autoAnimateUnmatched = 'fade-in'; unmatchedElement.dataset.autoAnimateUnmatched = 'fade-in';
} ); } );
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 '+ (animationOptions.duration*0.8) +'s ease '+ (animationOptions.duration*0.2) +'s; }' );
} }
// Setting the whole chunk of CSS at once is the most // Setting the whole chunk of CSS at once is the most
@ -3938,11 +3931,11 @@
* @param {HTMLElement} from * @param {HTMLElement} from
* @param {HTMLElement} to * @param {HTMLElement} to
* @param {Object} elementOptions Options for this element pair * @param {Object} elementOptions Options for this element pair
* @param {Object} slideOptions Options set at the slide level * @param {Object} animationOptions Options set at the slide level
* @param {String} id Unique ID that we can use to identify this * @param {String} id Unique ID that we can use to identify this
* auto-animate element in the DOM * auto-animate element in the DOM
*/ */
function getAutoAnimateCSS( from, to, elementOptions, slideOptions, id ) { function getAutoAnimateCSS( from, to, elementOptions, animationOptions, id ) {
// 'from' elements are given a data-auto-animate-target with no value, // 'from' elements are given a data-auto-animate-target with no value,
// 'to' elements are are given a data-auto-animate-target with an ID // 'to' elements are are given a data-auto-animate-target with an ID
@ -3951,7 +3944,7 @@
// Each element may override any of the auto-animate options // Each element may override any of the auto-animate options
// like transition easing, duration and delay via data-attributes // like transition easing, duration and delay via data-attributes
var options = getAutoAnimateOptions( to, slideOptions ); var options = getAutoAnimateOptions( to, animationOptions );
// If we're using a custom element matcher the element options // If we're using a custom element matcher the element options
// may contain additional transition overrides // may contain additional transition overrides
@ -3967,9 +3960,11 @@
// of the 'from' element // of the 'from' element
if( elementOptions.translate !== false || elementOptions.scale !== false ) { if( elementOptions.translate !== false || elementOptions.scale !== false ) {
var scale = Reveal.getScale();
var delta = { var delta = {
x: fromProps.x - toProps.x, x: ( fromProps.x - toProps.x ) / scale,
y: fromProps.y - toProps.y + options.offsetY, y: ( fromProps.y - toProps.y ) / scale,
scaleX: fromProps.width / toProps.width, scaleX: fromProps.width / toProps.width,
scaleY: fromProps.height / toProps.height scaleY: fromProps.height / toProps.height
}; };
@ -4007,7 +4002,7 @@
// Instantly move to the 'from' state // Instantly move to the 'from' state
fromProps.styles['transition'] = 'none'; fromProps.styles['transition'] = 'none';
// transition to the 'to' state // Animate towards the 'to' state
toProps.styles['transition'] = 'all '+ options.duration +'s '+ options.easing + ' ' + options.delay + 's'; toProps.styles['transition'] = 'all '+ options.duration +'s '+ options.easing + ' ' + options.delay + 's';
// Build up our custom CSS. We need to override inline styles // Build up our custom CSS. We need to override inline styles
@ -4020,6 +4015,7 @@
return propertyName + ': ' + toProps.styles[propertyName] + ' !important;'; return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';
} ).join( '' ); } ).join( '' );
css = '.reveal [data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' + css = '.reveal [data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' +
'.reveal [data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}'; '.reveal [data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}';
@ -4076,10 +4072,11 @@
// Position and size // Position and size
if( elementOptions.translate !== false || elementOptions.scale !== false ) { if( elementOptions.translate !== false || elementOptions.scale !== false ) {
properties.x = element.offsetLeft; var bounds = element.getBoundingClientRect();
properties.y = element.offsetTop; properties.x = bounds.x;
properties.width = element.offsetWidth; properties.y = bounds.y;
properties.height = element.offsetHeight; properties.width = bounds.width;
properties.height = bounds.height;
} }
var computedStyles = getComputedStyle( element ); var computedStyles = getComputedStyle( element );

View File

@ -48,29 +48,31 @@
<p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Line Height & Letter Spacing</p> <p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Line Height & Letter Spacing</p>
</section> </section>
<section data-auto-animate> <section>
<h3>Swapping list items</h3> <section data-auto-animate>
<ul> <h3>Swapping list items</h3>
<li>One</li> <ul>
<li>Two</li> <li>One</li>
<li>Three</li> <li>Two</li>
</ul> <li>Three</li>
</section> </ul>
<section data-auto-animate> </section>
<h3>Swapping list items</h3> <section data-auto-animate>
<ul> <h3>Swapping list items</h3>
<li>Two</li> <ul>
<li>One</li> <li>Two</li>
<li>Three</li> <li>One</li>
</ul> <li>Three</li>
</section> </ul>
<section data-auto-animate> </section>
<h3>Swapping list items</h3> <section data-auto-animate>
<ul> <h3>Swapping list items</h3>
<li>Two</li> <ul>
<li>Three</li> <li>Two</li>
<li>One</li> <li>Three</li>
</ul> <li>One</li>
</ul>
</section>
</section> </section>
<section data-auto-animate style="height: 600px"> <section data-auto-animate style="height: 600px">