From 4ff7fd3a712b4ecf60ff0d1da1006c2c853d8141 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 17 Feb 2020 13:14:46 +0100 Subject: [PATCH] switch to bounding rect for auto-animate deltas --- css/reveal.css | 4 +++ css/reveal.scss | 4 +++ js/reveal.js | 37 ++++++++++++------------- test/examples/auto-animate.html | 48 +++++++++++++++++---------------- 4 files changed, 50 insertions(+), 43 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index 2d19d61..b1d4e75 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1045,6 +1045,10 @@ body { .reveal .slides.disable-slide-transitions section { transition: none !important; } +.reveal .slides.disable-slide-transitions section { + -webkit-transform: none !important; + transform: none !important; } + /********************************************* * PER-SLIDE BACKGROUNDS *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index 1d14a02..e0dacce 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1123,6 +1123,10 @@ $controlsArrowAngleActive: 36deg; transition: none !important; } +.reveal .slides.disable-slide-transitions section { + transform: none !important; +} + /********************************************* * PER-SLIDE BACKGROUNDS diff --git a/js/reveal.js b/js/reveal.js index 5e2cf50..1f12b94 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -3868,14 +3868,7 @@ autoAnimateStyleSheet.type = 'text/css'; document.head.appendChild( autoAnimateStyleSheet ); - var slideOptions = 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 - - } ); + var animationOptions = getAutoAnimateOptions( toSlide ); // Set our starting state fromSlide.dataset.autoAnimate = 'pending'; @@ -3883,7 +3876,7 @@ // Inject our auto-animate styles for this transition 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 @@ -3893,7 +3886,7 @@ 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 @@ -3938,11 +3931,11 @@ * @param {HTMLElement} from * @param {HTMLElement} to * @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 * 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, // '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 // 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 // may contain additional transition overrides @@ -3967,9 +3960,11 @@ // of the 'from' element if( elementOptions.translate !== false || elementOptions.scale !== false ) { + var scale = Reveal.getScale(); + var delta = { - x: fromProps.x - toProps.x, - y: fromProps.y - toProps.y + options.offsetY, + x: ( fromProps.x - toProps.x ) / scale, + y: ( fromProps.y - toProps.y ) / scale, scaleX: fromProps.width / toProps.width, scaleY: fromProps.height / toProps.height }; @@ -4007,7 +4002,7 @@ // Instantly move to the 'from' state 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'; // Build up our custom CSS. We need to override inline styles @@ -4020,6 +4015,7 @@ return propertyName + ': ' + toProps.styles[propertyName] + ' !important;'; } ).join( '' ); + css = '.reveal [data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' + '.reveal [data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}'; @@ -4076,10 +4072,11 @@ // Position and size if( elementOptions.translate !== false || elementOptions.scale !== false ) { - properties.x = element.offsetLeft; - properties.y = element.offsetTop; - properties.width = element.offsetWidth; - properties.height = element.offsetHeight; + var bounds = element.getBoundingClientRect(); + properties.x = bounds.x; + properties.y = bounds.y; + properties.width = bounds.width; + properties.height = bounds.height; } var computedStyles = getComputedStyle( element ); diff --git a/test/examples/auto-animate.html b/test/examples/auto-animate.html index a70e2d2..c81b949 100644 --- a/test/examples/auto-animate.html +++ b/test/examples/auto-animate.html @@ -48,29 +48,31 @@

Line Height & Letter Spacing

-
-

Swapping list items

- -
-
-

Swapping list items

- -
-
-

Swapping list items

- +
+
+

Swapping list items

+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
+
+
+

Swapping list items

+
    +
  • Two
    • +
  • One
    • +
  • Three
    • +
+
+
+

Swapping list items

+
    +
  • Two
    • +
  • Three
    • +
  • One
    • +
+