inst/reveal.js-4.6.1/js/controllers/autoanimate.js - IDS-Mannheim/revealjs - Gitiles

 import { queryAll, extend, createStyleSheet, matches, closest } from '../utils/util.js'
 import { FRAGMENT_STYLE_REGEX } from '../utils/constants.js'

 // Counter used to generate unique IDs for auto-animated elements
 let autoAnimateCounter = 0;

 /**
  * Automatically animates matching elements across
  * slides with the [data-auto-animate] attribute.
  */
 export default class AutoAnimate {

 	constructor( Reveal ) {

 		this.Reveal = Reveal;

 	}

 	/**
 	 * Runs an auto-animation between the given slides.
 	 *
 	 * @param  {HTMLElement} fromSlide
 	 * @param  {HTMLElement} toSlide
 	 */
 	run( fromSlide, toSlide ) {

 		// Clean up after prior animations
 		this.reset();

 		let allSlides = this.Reveal.getSlides();
 		let toSlideIndex = allSlides.indexOf( toSlide );
 		let fromSlideIndex = allSlides.indexOf( fromSlide );

 		// Ensure that both slides are auto-animate targets with the same data-auto-animate-id value
 		// (including null if absent on both) and that data-auto-animate-restart isn't set on the
 		// physically latter slide (independent of slide direction)
 		if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )
 				&& fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' )
 				&& !( toSlideIndex > fromSlideIndex ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {

 			// Create a new auto-animate sheet
 			this.autoAnimateStyleSheet = this.autoAnimateStyleSheet || createStyleSheet();

 			let animationOptions = this.getAutoAnimateOptions( toSlide );

 			// Set our starting state
 			fromSlide.dataset.autoAnimate = 'pending';
 			toSlide.dataset.autoAnimate = 'pending';

 			// Flag the navigation direction, needed for fragment buildup
 			animationOptions.slideDirection = toSlideIndex > fromSlideIndex ? 'forward' : 'backward';

 			// If the from-slide is hidden because it has moved outside
 			// the view distance, we need to temporarily show it while
 			// measuring
 			let fromSlideIsHidden = fromSlide.style.display === 'none';
 			if( fromSlideIsHidden ) fromSlide.style.display = this.Reveal.getConfig().display;

 			// Inject our auto-animate styles for this transition
 			let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
 				return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ );
 			} );

 			if( fromSlideIsHidden ) fromSlide.style.display = 'none';

 			// Animate unmatched elements, if enabled
 			if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) {

 				// Our default timings for unmatched elements
 				let defaultUnmatchedDuration = animationOptions.duration * 0.8,
 					defaultUnmatchedDelay = animationOptions.duration * 0.2;

 				this.getUnmatchedAutoAnimateElements( toSlide ).forEach( unmatchedElement => {

 					let unmatchedOptions = this.getAutoAnimateOptions( unmatchedElement, animationOptions );
 					let id = 'unmatched';

 					// If there is a duration or delay set specifically for this
 					// element our unmatched elements should adhere to those
 					if( unmatchedOptions.duration !== animationOptions.duration || unmatchedOptions.delay !== animationOptions.delay ) {
 						id = 'unmatched-' + autoAnimateCounter++;
 						css.push( `[data-auto-animate="running"] [data-auto-animate-target="${id}"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }` );
 					}

 					unmatchedElement.dataset.autoAnimateTarget = id;

 				}, this );

 				// Our default transition for unmatched elements
 				css.push( `[data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: opacity ${defaultUnmatchedDuration}s ease ${defaultUnmatchedDelay}s; }` );

 			}

 			// Setting the whole chunk of CSS at once is the most
 			// efficient way to do this. Using sheet.insertRule
 			// is multiple factors slower.
 			this.autoAnimateStyleSheet.innerHTML = css.join( '' );

 			// Start the animation next cycle
 			requestAnimationFrame( () => {
 				if( this.autoAnimateStyleSheet ) {
 					// This forces our newly injected styles to be applied in Firefox
 					getComputedStyle( this.autoAnimateStyleSheet ).fontWeight;

 					toSlide.dataset.autoAnimate = 'running';
 				}
 			} );

 			this.Reveal.dispatchEvent({
 				type: 'autoanimate',
 				data: {
 					fromSlide,
 					toSlide,
 					sheet: this.autoAnimateStyleSheet
 				}
 			});

 		}

 	}

 	/**
 	 * Rolls back all changes that we've made to the DOM so
 	 * that as part of animating.
 	 */
 	reset() {

 		// Reset slides
 		queryAll( this.Reveal.getRevealElement(), '[data-auto-animate]:not([data-auto-animate=""])' ).forEach( element => {
 			element.dataset.autoAnimate = '';
 		} );

 		// Reset elements
 		queryAll( this.Reveal.getRevealElement(), '[data-auto-animate-target]' ).forEach( element => {
 			delete element.dataset.autoAnimateTarget;
 		} );

 		// Remove the animation sheet
 		if( this.autoAnimateStyleSheet && this.autoAnimateStyleSheet.parentNode ) {
 			this.autoAnimateStyleSheet.parentNode.removeChild( this.autoAnimateStyleSheet );
 			this.autoAnimateStyleSheet = null;
 		}

 	}

 	/**
 	 * Creates a FLIP animation where the `to` element starts out
 	 * in the `from` element position and animates to its original
 	 * state.
 	 *
 	 * @param {HTMLElement} from
 	 * @param {HTMLElement} to
 	 * @param {Object} elementOptions Options for this element pair
 	 * @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
 	 */
 	autoAnimateElements( 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
 		from.dataset.autoAnimateTarget = '';
 		to.dataset.autoAnimateTarget = id;

 		// Each element may override any of the auto-animate options
 		// like transition easing, duration and delay via data-attributes
 		let options = this.getAutoAnimateOptions( to, animationOptions );

 		// If we're using a custom element matcher the element options
 		// may contain additional transition overrides
 		if( typeof elementOptions.delay !== 'undefined' ) options.delay = elementOptions.delay;
 		if( typeof elementOptions.duration !== 'undefined' ) options.duration = elementOptions.duration;
 		if( typeof elementOptions.easing !== 'undefined' ) options.easing = elementOptions.easing;

 		let fromProps = this.getAutoAnimatableProperties( 'from', from, elementOptions ),
 			toProps = this.getAutoAnimatableProperties( 'to', to, elementOptions );

 		// Maintain fragment visibility for matching elements when
 		// we're navigating forwards, this way the viewer won't need
 		// to step through the same fragments twice
 		if( to.classList.contains( 'fragment' ) ) {

 			// Don't auto-animate the opacity of fragments to avoid
 			// conflicts with fragment animations
 			delete toProps.styles['opacity'];

 			if( from.classList.contains( 'fragment' ) ) {

 				let fromFragmentStyle = ( from.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];
 				let toFragmentStyle = ( to.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];

 				// Only skip the fragment if the fragment animation style
 				// remains unchanged
 				if( fromFragmentStyle === toFragmentStyle && animationOptions.slideDirection === 'forward' ) {
 					to.classList.add( 'visible', 'disabled' );
 				}

 			}

 		}

 		// If translation and/or scaling are enabled, css transform
 		// the 'to' element so that it matches the position and size
 		// of the 'from' element
 		if( elementOptions.translate !== false || elementOptions.scale !== false ) {

 			let presentationScale = this.Reveal.getScale();

 			let delta = {
 				x: ( fromProps.x - toProps.x ) / presentationScale,
 				y: ( fromProps.y - toProps.y ) / presentationScale,
 				scaleX: fromProps.width / toProps.width,
 				scaleY: fromProps.height / toProps.height
 			};

 			// Limit decimal points to avoid 0.0001px blur and stutter
 			delta.x = Math.round( delta.x * 1000 ) / 1000;
 			delta.y = Math.round( delta.y * 1000 ) / 1000;
 			delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;
 			delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;

 			let translate = elementOptions.translate !== false && ( delta.x !== 0 || delta.y !== 0 ),
 				scale = elementOptions.scale !== false && ( delta.scaleX !== 0 || delta.scaleY !== 0 );

 			// No need to transform if nothing's changed
 			if( translate || scale ) {

 				let transform = [];

 				if( translate ) transform.push( `translate(${delta.x}px, ${delta.y}px)` );
 				if( scale ) transform.push( `scale(${delta.scaleX}, ${delta.scaleY})` );

 				fromProps.styles['transform'] = transform.join( ' ' );
 				fromProps.styles['transform-origin'] = 'top left';

 				toProps.styles['transform'] = 'none';

 			}

 		}

 		// Delete all unchanged 'to' styles
 		for( let propertyName in toProps.styles ) {
 			const toValue = toProps.styles[propertyName];
 			const fromValue = fromProps.styles[propertyName];

 			if( toValue === fromValue ) {
 				delete toProps.styles[propertyName];
 			}
 			else {
 				// If these property values were set via a custom matcher providing
 				// an explicit 'from' and/or 'to' value, we always inject those values.
 				if( toValue.explicitValue === true ) {
 					toProps.styles[propertyName] = toValue.value;
 				}

 				if( fromValue.explicitValue === true ) {
 					fromProps.styles[propertyName] = fromValue.value;
 				}
 			}
 		}

 		let css = '';

 		let toStyleProperties = Object.keys( toProps.styles );

 		// Only create animate this element IF at least one style
 		// property has changed
 		if( toStyleProperties.length > 0 ) {

 			// Instantly move to the 'from' state
 			fromProps.styles['transition'] = 'none';

 			// Animate towards the 'to' state
 			toProps.styles['transition'] = `all ${options.duration}s ${options.easing} ${options.delay}s`;
 			toProps.styles['transition-property'] = toStyleProperties.join( ', ' );
 			toProps.styles['will-change'] = toStyleProperties.join( ', ' );

 			// Build up our custom CSS. We need to override inline styles
 			// so we need to make our styles vErY IMPORTANT!1!!
 			let fromCSS = Object.keys( fromProps.styles ).map( propertyName => {
 				return propertyName + ': ' + fromProps.styles[propertyName] + ' !important;';
 			} ).join( '' );

 			let toCSS = Object.keys( toProps.styles ).map( propertyName => {
 				return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';
 			} ).join( '' );

 			css = 	'[data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' +
 					'[data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}';

 		}

 		return css;

 	}

 	/**
 	 * Returns the auto-animate options for the given element.
 	 *
 	 * @param {HTMLElement} element Element to pick up options
 	 * from, either a slide or an animation target
 	 * @param {Object} [inheritedOptions] Optional set of existing
 	 * options
 	 */
 	getAutoAnimateOptions( element, inheritedOptions ) {

 		let options = {
 			easing: this.Reveal.getConfig().autoAnimateEasing,
 			duration: this.Reveal.getConfig().autoAnimateDuration,
 			delay: 0
 		};

 		options = extend( options, inheritedOptions );

 		// Inherit options from parent elements
 		if( element.parentNode ) {
 			let autoAnimatedParent = closest( element.parentNode, '[data-auto-animate-target]' );
 			if( autoAnimatedParent ) {
 				options = this.getAutoAnimateOptions( autoAnimatedParent, options );
 			}
 		}

 		if( element.dataset.autoAnimateEasing ) {
 			options.easing = element.dataset.autoAnimateEasing;
 		}

 		if( element.dataset.autoAnimateDuration ) {
 			options.duration = parseFloat( element.dataset.autoAnimateDuration );
 		}

 		if( element.dataset.autoAnimateDelay ) {
 			options.delay = parseFloat( element.dataset.autoAnimateDelay );
 		}

 		return options;

 	}

 	/**
 	 * Returns an object containing all of the properties
 	 * that can be auto-animated for the given element and
 	 * their current computed values.
 	 *
 	 * @param {String} direction 'from' or 'to'
 	 */
 	getAutoAnimatableProperties( direction, element, elementOptions ) {

 		let config = this.Reveal.getConfig();

 		let properties = { styles: [] };

 		// Position and size
 		if( elementOptions.translate !== false || elementOptions.scale !== false ) {
 			let bounds;

 			// Custom auto-animate may optionally return a custom tailored
 			// measurement function
 			if( typeof elementOptions.measure === 'function' ) {
 				bounds = elementOptions.measure( element );
 			}
 			else {
 				if( config.center ) {
 					// More precise, but breaks when used in combination
 					// with zoom for scaling the deck ¯\_(ツ)_/¯
 					bounds = element.getBoundingClientRect();
 				}
 				else {
 					let scale = this.Reveal.getScale();
 					bounds = {
 						x: element.offsetLeft * scale,
 						y: element.offsetTop * scale,
 						width: element.offsetWidth * scale,
 						height: element.offsetHeight * scale
 					};
 				}
 			}

 			properties.x = bounds.x;
 			properties.y = bounds.y;
 			properties.width = bounds.width;
 			properties.height = bounds.height;
 		}

 		const computedStyles = getComputedStyle( element );

 		// CSS styles
 		( elementOptions.styles || config.autoAnimateStyles ).forEach( style => {
 			let value;

 			// `style` is either the property name directly, or an object
 			// definition of a style property
 			if( typeof style === 'string' ) style = { property: style };

 			if( typeof style.from !== 'undefined' && direction === 'from' ) {
 				value = { value: style.from, explicitValue: true };
 			}
 			else if( typeof style.to !== 'undefined' && direction === 'to' ) {
 				value = { value: style.to, explicitValue: true };
 			}
 			else {
 				// Use a unitless value for line-height so that it inherits properly
 				if( style.property === 'line-height' ) {
 					value = parseFloat( computedStyles['line-height'] ) / parseFloat( computedStyles['font-size'] );
 				}

 				if( isNaN(value) ) {
 					value = computedStyles[style.property];
 				}
 			}

 			if( value !== '' ) {
 				properties.styles[style.property] = value;
 			}
 		} );

 		return properties;

 	}

 	/**
 	 * Get a list of all element pairs that we can animate
 	 * between the given slides.
 	 *
 	 * @param {HTMLElement} fromSlide
 	 * @param {HTMLElement} toSlide
 	 *
 	 * @return {Array} Each value is an array where [0] is
 	 * the element we're animating from and [1] is the
 	 * element we're animating to
 	 */
 	getAutoAnimatableElements( fromSlide, toSlide ) {

 		let matcher = typeof this.Reveal.getConfig().autoAnimateMatcher === 'function' ? this.Reveal.getConfig().autoAnimateMatcher : this.getAutoAnimatePairs;

 		let pairs = matcher.call( this, fromSlide, toSlide );

 		let reserved = [];

 		// Remove duplicate pairs
 		return pairs.filter( ( pair, index ) => {
 			if( reserved.indexOf( pair.to ) === -1 ) {
 				reserved.push( pair.to );
 				return true;
 			}
 		} );

 	}

 	/**
 	 * Identifies matching elements between slides.
 	 *
 	 * You can specify a custom matcher function by using
 	 * the `autoAnimateMatcher` config option.
 	 */
 	getAutoAnimatePairs( fromSlide, toSlide ) {

 		let pairs = [];

 		const codeNodes = 'pre';
 		const textNodes = 'h1, h2, h3, h4, h5, h6, p, li';
 		const mediaNodes = 'img, video, iframe';

 		// Explicit matches via data-id
 		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, '[data-id]', node => {
 			return node.nodeName + ':::' + node.getAttribute( 'data-id' );
 		} );

 		// Text
 		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => {
 			return node.nodeName + ':::' + node.innerText;
 		} );

 		// Media
 		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, mediaNodes, node => {
 			return node.nodeName + ':::' + ( node.getAttribute( 'src' ) || node.getAttribute( 'data-src' ) );
 		} );

 		// Code
 		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => {
 			return node.nodeName + ':::' + node.innerText;
 		} );

 		pairs.forEach( pair => {
 			// Disable scale transformations on text nodes, we transition
 			// each individual text property instead
 			if( matches( pair.from, textNodes ) ) {
 				pair.options = { scale: false };
 			}
 			// Animate individual lines of code
 			else if( matches( pair.from, codeNodes ) ) {

 				// Transition the code block's width and height instead of scaling
 				// to prevent its content from being squished
 				pair.options = { scale: false, styles: [ 'width', 'height' ] };

 				// Lines of code
 				this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-code', node => {
 					return node.textContent;
 				}, {
 					scale: false,
 					styles: [],
 					measure: this.getLocalBoundingBox.bind( this )
 				} );

 				// Line numbers
 				this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-numbers[data-line-number]', node => {
 					return node.getAttribute( 'data-line-number' );
 				}, {
 					scale: false,
 					styles: [ 'width' ],
 					measure: this.getLocalBoundingBox.bind( this )
 				} );

 			}

 		}, this );

 		return pairs;

 	}

 	/**
 	 * Helper method which returns a bounding box based on
 	 * the given elements offset coordinates.
 	 *
 	 * @param {HTMLElement} element
 	 * @return {Object} x, y, width, height
 	 */
 	getLocalBoundingBox( element ) {

 		const presentationScale = this.Reveal.getScale();

 		return {
 			x: Math.round( ( element.offsetLeft * presentationScale ) * 100 ) / 100,
 			y: Math.round( ( element.offsetTop * presentationScale ) * 100 ) / 100,
 			width: Math.round( ( element.offsetWidth * presentationScale ) * 100 ) / 100,
 			height: Math.round( ( element.offsetHeight * presentationScale ) * 100 ) / 100
 		};

 	}

 	/**
 	 * Finds matching elements between two slides.
 	 *
 	 * @param {Array} pairs            	List of pairs to push matches to
 	 * @param {HTMLElement} fromScope   Scope within the from element exists
 	 * @param {HTMLElement} toScope     Scope within the to element exists
 	 * @param {String} selector         CSS selector of the element to match
 	 * @param {Function} serializer     A function that accepts an element and returns
 	 *                                  a stringified ID based on its contents
 	 * @param {Object} animationOptions Optional config options for this pair
 	 */
 	findAutoAnimateMatches( pairs, fromScope, toScope, selector, serializer, animationOptions ) {

 		let fromMatches = {};
 		let toMatches = {};

 		[].slice.call( fromScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {
 			const key = serializer( element );
 			if( typeof key === 'string' && key.length ) {
 				fromMatches[key] = fromMatches[key] || [];
 				fromMatches[key].push( element );
 			}
 		} );

 		[].slice.call( toScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {
 			const key = serializer( element );
 			toMatches[key] = toMatches[key] || [];
 			toMatches[key].push( element );

 			let fromElement;

 			// Retrieve the 'from' element
 			if( fromMatches[key] ) {
 				const primaryIndex = toMatches[key].length - 1;
 				const secondaryIndex = fromMatches[key].length - 1;

 				// If there are multiple identical from elements, retrieve
 				// the one at the same index as our to-element.
 				if( fromMatches[key][ primaryIndex ] ) {
 					fromElement = fromMatches[key][ primaryIndex ];
 					fromMatches[key][ primaryIndex ] = null;
 				}
 				// If there are no matching from-elements at the same index,
 				// use the last one.
 				else if( fromMatches[key][ secondaryIndex ] ) {
 					fromElement = fromMatches[key][ secondaryIndex ];
 					fromMatches[key][ secondaryIndex ] = null;
 				}
 			}

 			// If we've got a matching pair, push it to the list of pairs
 			if( fromElement ) {
 				pairs.push({
 					from: fromElement,
 					to: element,
 					options: animationOptions
 				});
 			}
 		} );

 	}

 	/**
 	 * Returns a all elements within the given scope that should
 	 * be considered unmatched in an auto-animate transition. If
 	 * fading of unmatched elements is turned on, these elements
 	 * will fade when going between auto-animate slides.
 	 *
 	 * Note that parents of auto-animate targets are NOT considered
 	 * unmatched since fading them would break the auto-animation.
 	 *
 	 * @param {HTMLElement} rootElement
 	 * @return {Array}
 	 */
 	getUnmatchedAutoAnimateElements( rootElement ) {

 		return [].slice.call( rootElement.children ).reduce( ( result, element ) => {

 			const containsAnimatedElements = element.querySelector( '[data-auto-animate-target]' );

 			// The element is unmatched if
 			// - It is not an auto-animate target
 			// - It does not contain any auto-animate targets
 			if( !element.hasAttribute( 'data-auto-animate-target' ) && !containsAnimatedElements ) {
 				result.push( element );
 			}

 			if( element.querySelector( '[data-auto-animate-target]' ) ) {
 				result = result.concat( this.getUnmatchedAutoAnimateElements( element ) );
 			}

 			return result;

 		}, [] );

 	}

 }
	import { queryAll, extend, createStyleSheet, matches, closest } from '../utils/util.js'
	import { FRAGMENT_STYLE_REGEX } from '../utils/constants.js'

	// Counter used to generate unique IDs for auto-animated elements
	let autoAnimateCounter = 0;

	/**
	* Automatically animates matching elements across
	* slides with the [data-auto-animate] attribute.
	*/
	export default class AutoAnimate {

	constructor( Reveal ) {

	this.Reveal = Reveal;

	}

	/**
	* Runs an auto-animation between the given slides.
	*
	* @param {HTMLElement} fromSlide
	* @param {HTMLElement} toSlide
	*/
	run( fromSlide, toSlide ) {

	// Clean up after prior animations
	this.reset();

	let allSlides = this.Reveal.getSlides();
	let toSlideIndex = allSlides.indexOf( toSlide );
	let fromSlideIndex = allSlides.indexOf( fromSlide );

	// Ensure that both slides are auto-animate targets with the same data-auto-animate-id value
	// (including null if absent on both) and that data-auto-animate-restart isn't set on the
	// physically latter slide (independent of slide direction)
	if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )
	&& fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' )
	&& !( toSlideIndex > fromSlideIndex ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {

	// Create a new auto-animate sheet
	this.autoAnimateStyleSheet = this.autoAnimateStyleSheet \|\| createStyleSheet();

	let animationOptions = this.getAutoAnimateOptions( toSlide );

	// Set our starting state
	fromSlide.dataset.autoAnimate = 'pending';
	toSlide.dataset.autoAnimate = 'pending';

	// Flag the navigation direction, needed for fragment buildup
	animationOptions.slideDirection = toSlideIndex > fromSlideIndex ? 'forward' : 'backward';

	// If the from-slide is hidden because it has moved outside
	// the view distance, we need to temporarily show it while
	// measuring
	let fromSlideIsHidden = fromSlide.style.display === 'none';
	if( fromSlideIsHidden ) fromSlide.style.display = this.Reveal.getConfig().display;

	// Inject our auto-animate styles for this transition
	let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
	return this.autoAnimateElements( elements.from, elements.to, elements.options \|\| {}, animationOptions, autoAnimateCounter++ );
	} );

	if( fromSlideIsHidden ) fromSlide.style.display = 'none';

	// Animate unmatched elements, if enabled
	if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) {

	// Our default timings for unmatched elements
	let defaultUnmatchedDuration = animationOptions.duration * 0.8,
	defaultUnmatchedDelay = animationOptions.duration * 0.2;

	this.getUnmatchedAutoAnimateElements( toSlide ).forEach( unmatchedElement => {

	let unmatchedOptions = this.getAutoAnimateOptions( unmatchedElement, animationOptions );
	let id = 'unmatched';

	// If there is a duration or delay set specifically for this
	// element our unmatched elements should adhere to those
	if( unmatchedOptions.duration !== animationOptions.duration \|\| unmatchedOptions.delay !== animationOptions.delay ) {
	id = 'unmatched-' + autoAnimateCounter++;
	css.push( `[data-auto-animate="running"] [data-auto-animate-target="${id}"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }` );
	}

	unmatchedElement.dataset.autoAnimateTarget = id;

	}, this );

	// Our default transition for unmatched elements
	css.push( `[data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: opacity ${defaultUnmatchedDuration}s ease ${defaultUnmatchedDelay}s; }` );

	}

	// Setting the whole chunk of CSS at once is the most
	// efficient way to do this. Using sheet.insertRule
	// is multiple factors slower.
	this.autoAnimateStyleSheet.innerHTML = css.join( '' );

	// Start the animation next cycle
	requestAnimationFrame( () => {
	if( this.autoAnimateStyleSheet ) {
	// This forces our newly injected styles to be applied in Firefox
	getComputedStyle( this.autoAnimateStyleSheet ).fontWeight;

	toSlide.dataset.autoAnimate = 'running';
	}
	} );

	this.Reveal.dispatchEvent({
	type: 'autoanimate',
	data: {
	fromSlide,
	toSlide,
	sheet: this.autoAnimateStyleSheet
	}
	});

	}

	}

	/**
	* Rolls back all changes that we've made to the DOM so
	* that as part of animating.
	*/
	reset() {

	// Reset slides
	queryAll( this.Reveal.getRevealElement(), '[data-auto-animate]:not([data-auto-animate=""])' ).forEach( element => {
	element.dataset.autoAnimate = '';
	} );

	// Reset elements
	queryAll( this.Reveal.getRevealElement(), '[data-auto-animate-target]' ).forEach( element => {
	delete element.dataset.autoAnimateTarget;
	} );

	// Remove the animation sheet
	if( this.autoAnimateStyleSheet && this.autoAnimateStyleSheet.parentNode ) {
	this.autoAnimateStyleSheet.parentNode.removeChild( this.autoAnimateStyleSheet );
	this.autoAnimateStyleSheet = null;
	}

	}

	/**
	* Creates a FLIP animation where the `to` element starts out
	* in the `from` element position and animates to its original
	* state.
	*
	* @param {HTMLElement} from
	* @param {HTMLElement} to
	* @param {Object} elementOptions Options for this element pair
	* @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
	*/
	autoAnimateElements( 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
	from.dataset.autoAnimateTarget = '';
	to.dataset.autoAnimateTarget = id;

	// Each element may override any of the auto-animate options
	// like transition easing, duration and delay via data-attributes
	let options = this.getAutoAnimateOptions( to, animationOptions );

	// If we're using a custom element matcher the element options
	// may contain additional transition overrides
	if( typeof elementOptions.delay !== 'undefined' ) options.delay = elementOptions.delay;
	if( typeof elementOptions.duration !== 'undefined' ) options.duration = elementOptions.duration;
	if( typeof elementOptions.easing !== 'undefined' ) options.easing = elementOptions.easing;

	let fromProps = this.getAutoAnimatableProperties( 'from', from, elementOptions ),
	toProps = this.getAutoAnimatableProperties( 'to', to, elementOptions );

	// Maintain fragment visibility for matching elements when
	// we're navigating forwards, this way the viewer won't need
	// to step through the same fragments twice
	if( to.classList.contains( 'fragment' ) ) {

	// Don't auto-animate the opacity of fragments to avoid
	// conflicts with fragment animations
	delete toProps.styles['opacity'];

	if( from.classList.contains( 'fragment' ) ) {

	let fromFragmentStyle = ( from.className.match( FRAGMENT_STYLE_REGEX ) \|\| [''] )[0];
	let toFragmentStyle = ( to.className.match( FRAGMENT_STYLE_REGEX ) \|\| [''] )[0];

	// Only skip the fragment if the fragment animation style
	// remains unchanged
	if( fromFragmentStyle === toFragmentStyle && animationOptions.slideDirection === 'forward' ) {
	to.classList.add( 'visible', 'disabled' );
	}

	}

	}

	// If translation and/or scaling are enabled, css transform
	// the 'to' element so that it matches the position and size
	// of the 'from' element
	if( elementOptions.translate !== false \|\| elementOptions.scale !== false ) {

	let presentationScale = this.Reveal.getScale();

	let delta = {
	x: ( fromProps.x - toProps.x ) / presentationScale,
	y: ( fromProps.y - toProps.y ) / presentationScale,
	scaleX: fromProps.width / toProps.width,
	scaleY: fromProps.height / toProps.height
	};

	// Limit decimal points to avoid 0.0001px blur and stutter
	delta.x = Math.round( delta.x * 1000 ) / 1000;
	delta.y = Math.round( delta.y * 1000 ) / 1000;
	delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;
	delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;

	let translate = elementOptions.translate !== false && ( delta.x !== 0 \|\| delta.y !== 0 ),
	scale = elementOptions.scale !== false && ( delta.scaleX !== 0 \|\| delta.scaleY !== 0 );

	// No need to transform if nothing's changed
	if( translate \|\| scale ) {

	let transform = [];

	if( translate ) transform.push( `translate(${delta.x}px, ${delta.y}px)` );
	if( scale ) transform.push( `scale(${delta.scaleX}, ${delta.scaleY})` );

	fromProps.styles['transform'] = transform.join( ' ' );
	fromProps.styles['transform-origin'] = 'top left';

	toProps.styles['transform'] = 'none';

	}

	}

	// Delete all unchanged 'to' styles
	for( let propertyName in toProps.styles ) {
	const toValue = toProps.styles[propertyName];
	const fromValue = fromProps.styles[propertyName];

	if( toValue === fromValue ) {
	delete toProps.styles[propertyName];
	}
	else {
	// If these property values were set via a custom matcher providing
	// an explicit 'from' and/or 'to' value, we always inject those values.
	if( toValue.explicitValue === true ) {
	toProps.styles[propertyName] = toValue.value;
	}

	if( fromValue.explicitValue === true ) {
	fromProps.styles[propertyName] = fromValue.value;
	}
	}
	}

	let css = '';

	let toStyleProperties = Object.keys( toProps.styles );

	// Only create animate this element IF at least one style
	// property has changed
	if( toStyleProperties.length > 0 ) {

	// Instantly move to the 'from' state
	fromProps.styles['transition'] = 'none';

	// Animate towards the 'to' state
	toProps.styles['transition'] = `all ${options.duration}s ${options.easing} ${options.delay}s`;
	toProps.styles['transition-property'] = toStyleProperties.join( ', ' );
	toProps.styles['will-change'] = toStyleProperties.join( ', ' );

	// Build up our custom CSS. We need to override inline styles
	// so we need to make our styles vErY IMPORTANT!1!!
	let fromCSS = Object.keys( fromProps.styles ).map( propertyName => {
	return propertyName + ': ' + fromProps.styles[propertyName] + ' !important;';
	} ).join( '' );

	let toCSS = Object.keys( toProps.styles ).map( propertyName => {
	return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';
	} ).join( '' );

	css = '[data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' +
	'[data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}';

	}

	return css;

	}

	/**
	* Returns the auto-animate options for the given element.
	*
	* @param {HTMLElement} element Element to pick up options
	* from, either a slide or an animation target
	* @param {Object} [inheritedOptions] Optional set of existing
	* options
	*/
	getAutoAnimateOptions( element, inheritedOptions ) {

	let options = {
	easing: this.Reveal.getConfig().autoAnimateEasing,
	duration: this.Reveal.getConfig().autoAnimateDuration,
	delay: 0
	};

	options = extend( options, inheritedOptions );

	// Inherit options from parent elements
	if( element.parentNode ) {
	let autoAnimatedParent = closest( element.parentNode, '[data-auto-animate-target]' );
	if( autoAnimatedParent ) {
	options = this.getAutoAnimateOptions( autoAnimatedParent, options );
	}
	}

	if( element.dataset.autoAnimateEasing ) {
	options.easing = element.dataset.autoAnimateEasing;
	}

	if( element.dataset.autoAnimateDuration ) {
	options.duration = parseFloat( element.dataset.autoAnimateDuration );
	}

	if( element.dataset.autoAnimateDelay ) {
	options.delay = parseFloat( element.dataset.autoAnimateDelay );
	}

	return options;

	}

	/**
	* Returns an object containing all of the properties
	* that can be auto-animated for the given element and
	* their current computed values.
	*
	* @param {String} direction 'from' or 'to'
	*/
	getAutoAnimatableProperties( direction, element, elementOptions ) {

	let config = this.Reveal.getConfig();

	let properties = { styles: [] };

	// Position and size
	if( elementOptions.translate !== false \|\| elementOptions.scale !== false ) {
	let bounds;

	// Custom auto-animate may optionally return a custom tailored
	// measurement function
	if( typeof elementOptions.measure === 'function' ) {
	bounds = elementOptions.measure( element );
	}
	else {
	if( config.center ) {
	// More precise, but breaks when used in combination
	// with zoom for scaling the deck ¯\_(ツ)_/¯
	bounds = element.getBoundingClientRect();
	}
	else {
	let scale = this.Reveal.getScale();
	bounds = {
	x: element.offsetLeft * scale,
	y: element.offsetTop * scale,
	width: element.offsetWidth * scale,
	height: element.offsetHeight * scale
	};
	}
	}

	properties.x = bounds.x;
	properties.y = bounds.y;
	properties.width = bounds.width;
	properties.height = bounds.height;
	}

	const computedStyles = getComputedStyle( element );

	// CSS styles
	( elementOptions.styles \|\| config.autoAnimateStyles ).forEach( style => {
	let value;

	// `style` is either the property name directly, or an object
	// definition of a style property
	if( typeof style === 'string' ) style = { property: style };

	if( typeof style.from !== 'undefined' && direction === 'from' ) {
	value = { value: style.from, explicitValue: true };
	}
	else if( typeof style.to !== 'undefined' && direction === 'to' ) {
	value = { value: style.to, explicitValue: true };
	}
	else {
	// Use a unitless value for line-height so that it inherits properly
	if( style.property === 'line-height' ) {
	value = parseFloat( computedStyles['line-height'] ) / parseFloat( computedStyles['font-size'] );
	}

	if( isNaN(value) ) {
	value = computedStyles[style.property];
	}
	}

	if( value !== '' ) {
	properties.styles[style.property] = value;
	}
	} );

	return properties;

	}

	/**
	* Get a list of all element pairs that we can animate
	* between the given slides.
	*
	* @param {HTMLElement} fromSlide
	* @param {HTMLElement} toSlide
	*
	* @return {Array} Each value is an array where [0] is
	* the element we're animating from and [1] is the
	* element we're animating to
	*/
	getAutoAnimatableElements( fromSlide, toSlide ) {

	let matcher = typeof this.Reveal.getConfig().autoAnimateMatcher === 'function' ? this.Reveal.getConfig().autoAnimateMatcher : this.getAutoAnimatePairs;

	let pairs = matcher.call( this, fromSlide, toSlide );

	let reserved = [];

	// Remove duplicate pairs
	return pairs.filter( ( pair, index ) => {
	if( reserved.indexOf( pair.to ) === -1 ) {
	reserved.push( pair.to );
	return true;
	}
	} );

	}

	/**
	* Identifies matching elements between slides.
	*
	* You can specify a custom matcher function by using
	* the `autoAnimateMatcher` config option.
	*/
	getAutoAnimatePairs( fromSlide, toSlide ) {

	let pairs = [];

	const codeNodes = 'pre';
	const textNodes = 'h1, h2, h3, h4, h5, h6, p, li';
	const mediaNodes = 'img, video, iframe';

	// Explicit matches via data-id
	this.findAutoAnimateMatches( pairs, fromSlide, toSlide, '[data-id]', node => {
	return node.nodeName + ':::' + node.getAttribute( 'data-id' );
	} );

	// Text
	this.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => {
	return node.nodeName + ':::' + node.innerText;
	} );

	// Media
	this.findAutoAnimateMatches( pairs, fromSlide, toSlide, mediaNodes, node => {
	return node.nodeName + ':::' + ( node.getAttribute( 'src' ) \|\| node.getAttribute( 'data-src' ) );
	} );

	// Code
	this.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => {
	return node.nodeName + ':::' + node.innerText;
	} );

	pairs.forEach( pair => {
	// Disable scale transformations on text nodes, we transition
	// each individual text property instead
	if( matches( pair.from, textNodes ) ) {
	pair.options = { scale: false };
	}
	// Animate individual lines of code
	else if( matches( pair.from, codeNodes ) ) {

	// Transition the code block's width and height instead of scaling
	// to prevent its content from being squished
	pair.options = { scale: false, styles: [ 'width', 'height' ] };

	// Lines of code
	this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-code', node => {
	return node.textContent;
	}, {
	scale: false,
	styles: [],
	measure: this.getLocalBoundingBox.bind( this )
	} );

	// Line numbers
	this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-numbers[data-line-number]', node => {
	return node.getAttribute( 'data-line-number' );
	}, {
	scale: false,
	styles: [ 'width' ],
	measure: this.getLocalBoundingBox.bind( this )
	} );

	}

	}, this );

	return pairs;

	}

	/**
	* Helper method which returns a bounding box based on
	* the given elements offset coordinates.
	*
	* @param {HTMLElement} element
	* @return {Object} x, y, width, height
	*/
	getLocalBoundingBox( element ) {

	const presentationScale = this.Reveal.getScale();

	return {
	x: Math.round( ( element.offsetLeft * presentationScale ) * 100 ) / 100,
	y: Math.round( ( element.offsetTop * presentationScale ) * 100 ) / 100,
	width: Math.round( ( element.offsetWidth * presentationScale ) * 100 ) / 100,
	height: Math.round( ( element.offsetHeight * presentationScale ) * 100 ) / 100
	};

	}

	/**
	* Finds matching elements between two slides.
	*
	* @param {Array} pairs List of pairs to push matches to
	* @param {HTMLElement} fromScope Scope within the from element exists
	* @param {HTMLElement} toScope Scope within the to element exists
	* @param {String} selector CSS selector of the element to match
	* @param {Function} serializer A function that accepts an element and returns
	* a stringified ID based on its contents
	* @param {Object} animationOptions Optional config options for this pair
	*/
	findAutoAnimateMatches( pairs, fromScope, toScope, selector, serializer, animationOptions ) {

	let fromMatches = {};
	let toMatches = {};

	[].slice.call( fromScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {
	const key = serializer( element );
	if( typeof key === 'string' && key.length ) {
	fromMatches[key] = fromMatches[key] \|\| [];
	fromMatches[key].push( element );
	}
	} );

	[].slice.call( toScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {
	const key = serializer( element );
	toMatches[key] = toMatches[key] \|\| [];
	toMatches[key].push( element );

	let fromElement;

	// Retrieve the 'from' element
	if( fromMatches[key] ) {
	const primaryIndex = toMatches[key].length - 1;
	const secondaryIndex = fromMatches[key].length - 1;

	// If there are multiple identical from elements, retrieve
	// the one at the same index as our to-element.
	if( fromMatches[key][ primaryIndex ] ) {
	fromElement = fromMatches[key][ primaryIndex ];
	fromMatches[key][ primaryIndex ] = null;
	}
	// If there are no matching from-elements at the same index,
	// use the last one.
	else if( fromMatches[key][ secondaryIndex ] ) {
	fromElement = fromMatches[key][ secondaryIndex ];
	fromMatches[key][ secondaryIndex ] = null;
	}
	}

	// If we've got a matching pair, push it to the list of pairs
	if( fromElement ) {
	pairs.push({
	from: fromElement,
	to: element,
	options: animationOptions
	});
	}
	} );

	}

	/**
	* Returns a all elements within the given scope that should
	* be considered unmatched in an auto-animate transition. If
	* fading of unmatched elements is turned on, these elements
	* will fade when going between auto-animate slides.
	*
	* Note that parents of auto-animate targets are NOT considered
	* unmatched since fading them would break the auto-animation.
	*
	* @param {HTMLElement} rootElement
	* @return {Array}
	*/
	getUnmatchedAutoAnimateElements( rootElement ) {

	return [].slice.call( rootElement.children ).reduce( ( result, element ) => {

	const containsAnimatedElements = element.querySelector( '[data-auto-animate-target]' );

	// The element is unmatched if
	// - It is not an auto-animate target
	// - It does not contain any auto-animate targets
	if( !element.hasAttribute( 'data-auto-animate-target' ) && !containsAnimatedElements ) {
	result.push( element );
	}

	if( element.querySelector( '[data-auto-animate-target]' ) ) {
	result = result.concat( this.getUnmatchedAutoAnimateElements( element ) );
	}

	return result;

	}, [] );

	}

	}