From c38bc2c611cb2e301599d38445c87b6996184cfe Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Sun, 16 Feb 2020 19:14:46 +0100
Subject: [PATCH] fix issue that caused data-auto-animate to be added to the
 wrong slides

---
 js/reveal.js                | 18 ++++++++++--------
 test/test-auto-animate.html |  6 +++++-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/js/reveal.js b/js/reveal.js
index b9775ae..baf5243 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -3067,11 +3067,11 @@
 				setTimeout( function() {
 					dom.slides.classList.remove( 'disable-slide-transitions' );
 				}, 0 );
-			}
 
-			if( config.autoAnimate ) {
-				// Run the auto-animation between our slides
-				autoAnimate( previousSlide, currentSlide );
+				if( config.autoAnimate ) {
+					// Run the auto-animation between our slides
+					autoAnimate( previousSlide, currentSlide );
+				}
 			}
 
 		}
@@ -3876,9 +3876,11 @@
 
 		} );
 
-		// Set our starting state
-		fromSlide.dataset.autoAnimate = 'pending';
-		toSlide.dataset.autoAnimate = 'pending';
+		// Set our starting state. Note that we may be coming from, or
+		// going to, a non-auto-animate slide so we only want to assign
+		// this value is the attribute exists.
+		if( typeof fromSlide.dataset.autoAnimate === 'string' ) fromSlide.dataset.autoAnimate = 'pending';
+		if( typeof toSlide.dataset.autoAnimate === 'string' ) toSlide.dataset.autoAnimate = 'pending';
 
 		// Inject our auto-animate styles for this transition
 		var css = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) {
@@ -3902,7 +3904,7 @@
 
 		// Start the animation next cycle
 		setTimeout( function() {
-			toSlide.dataset.autoAnimate = 'running';
+			if( typeof toSlide.dataset.autoAnimate === 'string' ) toSlide.dataset.autoAnimate = 'running';
 		}, 2 );
 
 	}
diff --git a/test/test-auto-animate.html b/test/test-auto-animate.html
index 6e3080d..116e4d4 100644
--- a/test/test-auto-animate.html
+++ b/test/test-auto-animate.html
@@ -37,6 +37,10 @@
 					<h3>h3</h2>
 				</section>
 
+				<section>
+					<h1>Non-auto-animate slide</h1>
+				</section>
+
 			</div>
 
 		</div>
@@ -46,7 +50,7 @@
 
 		<script>
 
-			const slides = [].slice.call( document.querySelectorAll( '.slides section' ) ).map( slide => {
+			const slides = Array.prototype.map.call( document.querySelectorAll( '.slides section' ), slide => {
 				return {
 					h1: slide.querySelector( 'h1' ),
 					h2: slide.querySelector( 'h2' ),