auto-match animatable targets by their contents

js/reveal.js

@@ -3836,17 +3836,8 @@
 				options.duration = parseFloat( toSlide.getAttribute( 'data-auto-animate-duration' ) );
 			}
 
-			var fromTargets = {};
+			getAutoAnimatableElements( fromSlide, toSlide ).forEach( function( elements ) {
-
+				autoAnimateElement( elements[0], elements[1], options );
-			toArray( fromSlide.querySelectorAll( '[data-id]' ) ).forEach( function( fromElement ) {
-				fromTargets[ fromElement.getAttribute( 'data-id' ) ] = fromElement;
-			} );
-
-			toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( toElement ) {
-				var fromElement = fromTargets[ toElement.getAttribute( 'data-id' ) ];
-				if( fromElement ) {
-					autoAnimateElement( fromElement, toElement, options );
-				}
 			} );
 
 		}
@@ -3947,6 +3938,81 @@
 
 	}
 
+	/**
+	 * [getAutoAnimatableElements description]
+	 * @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
+	 */
+	function getAutoAnimatableElements( fromSlide, toSlide ) {
+
+		var pairs = findImplicitAutoAnimatePairs( fromSlide, toSlide )
+						.concat( findExplicitAutoAnimatePairs( fromSlide, toSlide ) );
+
+		// Remove duplicate pairs
+		pairs = pairs.filter( function( pair, index ) {
+			return index === pairs.findIndex( function( comparePair ) {
+				return pair[0] === comparePair[0] && pair[1] === comparePair[1];
+			} );
+		} );
+
+		return pairs;
+
+	}
+
+	/**
+	 * Returns an array of auto-animate element pairs
+	 * discovered through implicing means such as matching
+	 * text content.
+	 */
+	function findImplicitAutoAnimatePairs( fromSlide, toSlide ) {
+
+		var textSelector = 'h1, h2, h3, h4, h5, h6, p, li, span';
+
+		var pairs = [];
+		var fromHash = {};
+
+		toArray( fromSlide.querySelectorAll( textSelector ) ).forEach( function( element ) {
+			fromHash[ element.nodeName+':::'+element.textContent ] = element;
+		} );
+
+		toArray( toSlide.querySelectorAll( textSelector ) ).forEach( function( element ) {
+			var fromElement = fromHash[ element.nodeName+':::'+element.textContent ];
+			if( fromElement ) {
+				pairs.push([ fromElement, element ]);
+			}
+		} );
+
+		return pairs;
+
+	}
+
+	/**
+	 * Returns explicitly ID-matched auto-animate elements.
+	 */
+	function findExplicitAutoAnimatePairs( fromSlide, toSlide ) {
+
+		var pairs = [];
+		var fromHash = {};
+
+		toArray( fromSlide.querySelectorAll( '[data-id]' ) ).forEach( function( fromElement ) {
+			fromHash[ fromElement.getAttribute( 'data-id' ) ] = fromElement;
+		} );
+
+		toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( toElement ) {
+			var fromElement = fromHash[ toElement.getAttribute( 'data-id' ) ];
+			if( fromElement ) {
+				pairs.push([ fromElement, toElement ]);
+			}
+		} );
+
+		return pairs;
+
+	}
+
 	/**
 	 * Should the given element be preloaded?
 	 * Decides based on local element attributes and global config.

test/examples/auto-animate.html

@@ -19,12 +19,14 @@
 			<div class="slides">
 
 				<section data-auto-animate>
-					<h3 data-id="opacity-title">Fade and slide</h3>
+					<h3>Auto-Matched Content (no IDs)</h3>
-					<h3 data-id="opacity-test">Opacity 1.0</h3>
+					<h3>This will fade out</h3>
+					<img src="assets/image1.png">
 				</section>
 				<section data-auto-animate>
-					<h3 data-id="opacity-title">Fade and slide</h3>
+					<h3>Auto-Matched Content (no IDs)</h3>
-					<h3 data-id="opacity-test" style="opacity: 0.2; margin-top: 200px;">Opacity 0.2</h3>
+					<h3 style="opacity: 0.2; margin-top: 200px;">This will fade out</h3>
+					<img src="assets/image1.png">
 				</section>
 
 				<section data-auto-animate>
@@ -37,25 +39,25 @@
 				<section data-auto-animate>
 					<h3>Swapping list items</h3>
 					<ul>
-						<li data-id="li-1">One</li>
+						<li>One</li>
-						<li data-id="li-2">Two</li>
+						<li>Two</li>
-						<li data-id="li-3">Three</li>
+						<li>Three</li>
 					</ul>
 				</section>
 				<section data-auto-animate>
 					<h3>Swapping list items</h3>
 					<ul>
-						<li data-id="li-2">Two</li>
+						<li>Two</li>
-						<li data-id="li-1">One</li>
+						<li>One</li>
-						<li data-id="li-3">Three</li>
+						<li>Three</li>
 					</ul>
 				</section>
 				<section data-auto-animate>
 					<h3>Swapping list items</h3>
 					<ul>
-						<li data-id="li-2">Two</li>
+						<li>Two</li>
-						<li data-id="li-3">Three</li>
+						<li>Three</li>
-						<li data-id="li-1">One</li>
+						<li>One</li>
 					</ul>
 				</section>