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

fix auto-animatie transform origin + refactoring

Browse source
This commit is contained in:
Hakim El Hattab 2020-02-06 14:30:32 +01:00
parent 4802a2b7f4
commit e5ba80478d
2 changed files with 63 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

8
css/reveal.css
View file

@ -931,14 +931,6 @@ body {
transform: none; transform: none;
transition: none; } transition: none; }
/*********************************************
* AUTO ANIMATE
*********************************************/
.reveal section[data-auto-animate] .auto-animate-target {
transition-property: all;
-webkit-transform-origin: top left;
transform-origin: top left; }
/********************************************* /*********************************************
* PAUSED MODE * PAUSED MODE
*********************************************/ *********************************************/

41
js/reveal.js
View file

@ -394,6 +394,9 @@
// <style> element used to apply auto-animations // <style> element used to apply auto-animations
autoAnimateStyleSheet, autoAnimateStyleSheet,
// Counter used to generate unique IDs for auto-animated elements
autoAnimateCounter = 0,
// The current auto-slide duration // The current auto-slide duration
autoSlide = 0, autoSlide = 0,
@ -1427,9 +1430,10 @@
toArray( dom.wrapper.querySelectorAll( '.slides .auto-animate-start' ) ).forEach( function( element ) { toArray( dom.wrapper.querySelectorAll( '.slides .auto-animate-start' ) ).forEach( function( element ) {
element.classList.remove( 'auto-animate-start' ); element.classList.remove( 'auto-animate-start' );
} ); } );
toArray( dom.wrapper.querySelectorAll( '[data-auto-animate-id]' ) ).forEach( function( element ) { toArray( dom.wrapper.querySelectorAll( '[data-auto-animate-target]' ) ).forEach( function( element ) {
element.removeAttribute( 'data-auto-animate-id' ); element.removeAttribute( 'data-auto-animate-target' );
} ); } );
if( autoAnimateStyleSheet && autoAnimateStyleSheet.parentNode ) { if( autoAnimateStyleSheet && autoAnimateStyleSheet.parentNode ) {
autoAnimateStyleSheet.parentNode.removeChild( autoAnimateStyleSheet ); autoAnimateStyleSheet.parentNode.removeChild( autoAnimateStyleSheet );
autoAnimateStyleSheet = null; autoAnimateStyleSheet = null;
@ -3040,7 +3044,7 @@
cueAutoSlide(); cueAutoSlide();
// Auto-animation // Auto-animation
if( slideChanged && previousSlide && currentSlide ) { if( config.autoAnimate && slideChanged && previousSlide && currentSlide ) {
// Skip the slide transition between our two slides // Skip the slide transition between our two slides
// when auto-animating individual elements // when auto-animating individual elements
@ -3824,12 +3828,13 @@
*/ */
function autoAnimate( fromSlide, toSlide ) { function autoAnimate( fromSlide, toSlide ) {
if( config.autoAnimate ) {
// Lazily create the auto-animate stylesheet // Lazily create the auto-animate stylesheet
if( !autoAnimateStyleSheet ) { if( !autoAnimateStyleSheet ) {
autoAnimateStyleSheet = document.createElement( 'style' ); autoAnimateStyleSheet = document.createElement( 'style' );
document.querySelector( 'head' ).appendChild( autoAnimateStyleSheet ); document.head.appendChild( autoAnimateStyleSheet );
}
else {
autoAnimateStyleSheet.innerHTML = '';
} }
var animationOptions = { var animationOptions = {
@ -3855,15 +3860,18 @@
animationOptions.duration = parseFloat( toSlide.getAttribute( 'data-auto-animate-duration' ) ); animationOptions.duration = parseFloat( toSlide.getAttribute( 'data-auto-animate-duration' ) );
} }
// Remove any existing animate-target IDs to keep the DOM clean
toArray( document.querySelectorAll( '[data-auto-animate-target]' ) ).forEach( function( element ) {
element.removeAttribute( 'data-auto-animate-target' );
} );
// Reset any prior animation // Reset any prior animation
fromSlide.classList.remove( 'auto-animate-start' ); fromSlide.classList.remove( 'auto-animate-start' );
toSlide.classList.remove( 'auto-animate-start' ); toSlide.classList.remove( 'auto-animate-start' );
autoAnimateStyleSheet.innerHTML = '';
// Generate and write out custom auto-animate styles to the DOM // Generate and write out custom auto-animate styles to the DOM
autoAnimateStyleSheet.innerHTML = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements, i ) { autoAnimateStyleSheet.innerHTML += getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) {
return getAutoAnimateCSS( elements[0], elements[1], elements[2] || {}, animationOptions, i ); return getAutoAnimateCSS( elements[0], elements[1], elements[2] || {}, animationOptions, autoAnimateCounter++ );
} ).join( '' ); } ).join( '' );
// Start the animation next cycle // Start the animation next cycle
@ -3873,8 +3881,6 @@
} }
}
/** /**
* Auto-animates the properties of an element from their original * Auto-animates the properties of an element from their original
* values to their new state. * values to their new state.
@ -3884,11 +3890,14 @@
* @param {Object} options Optional settings for this specific pair * @param {Object} options Optional settings for this specific pair
* @param {Object} animationOptions Options that apply to all * @param {Object} animationOptions Options that apply to all
* elements in this transition * elements in this transition
* @param {String} id Unique ID that we can use to identify this
* auto-animate element in the DOM
*/ */
function getAutoAnimateCSS( from, to, options, animationOptions, id ) { function getAutoAnimateCSS( from, to, options, animationOptions, id ) {
// Each element gets a unique auto-animate ID // Each element gets a unique auto-animate ID
to.setAttribute( 'data-auto-animate-id', id ); from.setAttribute( 'data-auto-animate-target', '' );
to.setAttribute( 'data-auto-animate-target', id );
var fromProps = getAutoAnimatableProperties( 'from', from, options ), var fromProps = getAutoAnimatableProperties( 'from', from, options ),
toProps = getAutoAnimatableProperties( 'to', to, options ); toProps = getAutoAnimatableProperties( 'to', to, options );
@ -3917,7 +3926,7 @@
if( options.scale !== false ) transform.push( 'scale('+delta.scaleX+','+delta.scaleY+')' ); if( options.scale !== false ) transform.push( 'scale('+delta.scaleX+','+delta.scaleY+')' );
fromProps.styles.push([ 'transform', transform.join( ' ' ) ]); fromProps.styles.push([ 'transform', transform.join( ' ' ) ]);
fromProps.styles.push([ 'transformOrigin', 'top left' ]); fromProps.styles.push([ 'transform-origin', 'top left' ]);
toProps.styles.push([ 'transform', 'none' ]); toProps.styles.push([ 'transform', 'none' ]);
@ -3933,8 +3942,8 @@
return style[0] + ': ' + style[1] + ' !important;'; return style[0] + ': ' + style[1] + ' !important;';
} ).join( '' ); } ).join( '' );
return '.reveal [data-auto-animate-id="'+ id +'"] {\n'+ fromCSS +'\n}\n\n' + return '.reveal [data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' +
'.reveal .auto-animate-start [data-auto-animate-id="'+ id +'"] {\n'+ toCSS +'\n}\n\n'; '.reveal .auto-animate-start [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}';
} }