auto-animate performance improvements, dont animate unchanged properties

js/reveal.js

@@ -3935,12 +3935,6 @@
 		var fromProps = getAutoAnimatableProperties( 'from', from, elementOptions ),
 			toProps = getAutoAnimatableProperties( 'to', to, elementOptions );
 
-		// Instantly move to the 'from' state
-		fromProps.styles['transition'] = 'none';
-
-		// transition to the 'to' state
-		toProps.styles['transition'] = 'all '+ options.duration +'s '+ options.easing + ' ' + options.delay + 's';
-
 		// If translation and/or scaling are enabled, css transform
 		// the 'to' element so that it matches the position and size
 		// of the 'from' element
@@ -3953,6 +3947,9 @@
 				scaleY: fromProps.height / toProps.height
 			};
 
+			// No need to transform if nothing's changed
+			if( delta.x !== 0 || delta.y !== 0 || delta.scaleX !== 1 || delta.scaleY !== 1 ) {
+
 				var transform = [];
 
 				if( elementOptions.translate !== false ) transform.push( 'translate('+delta.x+'px, '+delta.y+'px)' );
@@ -3965,6 +3962,27 @@
 
 			}
 
+		}
+
+		// Delete all unchanged 'to' styles
+		for( var propertyName in toProps.styles ) {
+			if( toProps.styles[propertyName] === fromProps.styles[propertyName] ) {
+				delete toProps.styles[propertyName];
+			}
+		};
+
+		var css = '';
+
+		// Only create animate this element IF at least one style
+		// property has changed
+		if( Object.keys( toProps.styles ).length > 0 ) {
+
+			// Instantly move to the 'from' state
+			fromProps.styles['transition'] = 'none';
+
+			// transition to 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
 			// so we need to make our styles vErY IMPORTANT!1!!
 			var fromCSS = Object.keys( fromProps.styles ).map( function( propertyName ) {
@@ -3972,19 +3990,18 @@
 			} ).join( '' );
 
 			var toCSS = Object.keys( toProps.styles ).map( function( propertyName ) {
-			if( toProps.styles[propertyName] !== fromProps.styles[propertyName] ) {
 				return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';
-			}
-			else {
-				return '';
-			}
 			} ).join( '' );
 
-		return  '.reveal [data-auto-animate] [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 +'}';
 
 		}
 
+		return css;
+
+	}
+
 	/**
 	 * Returns the auto-animate options for the given element.
 	 *
@@ -4180,20 +4197,17 @@
 
 		return [].slice.call( rootElement.children ).reduce( function( result, element ) {
 
-			// If the element is auto-animated we can stop looking at this tree
+			var containsAnimatedElements = element.querySelector( '[data-auto-animate-target]' );
-			if( !element.hasAttribute( 'data-auto-animate-target' ) ) {
 
-				// If this element contains an auto-animated element it's considered
+			// The element is unmatched if
-				// a match since we can't fade it without affecting the inner
+			// - It is not an auto-animate target
-				// auto-animate target
+			// - It does not contain any auto-animate targets
-				if( !element.querySelector( '[data-auto-animate-target]' ) ) {
+			if( !element.hasAttribute( 'data-auto-animate-target' ) && !containsAnimatedElements ) {
 				result.push( element );
 			}
-				else {
-					// Keep looking down this tree
-					result = result.concat( getUnmatchedAutoAnimateElements( element ) );
-				}
 
+			if( element.querySelector( '[data-auto-animate-target]' ) ) {
+				result = result.concat( getUnmatchedAutoAnimateElements( element ) );
 			}
 
 			return result;