瀏覽代碼

additional auto-animation tests, default to 1s

Hakim El Hattab 5 年之前
父節點
當前提交
3bfd06c06d
共有 2 個文件被更改,包括 31 次插入4 次删除
  1. 2 2
      js/reveal.js
  2. 29 2
      test/examples/auto-animate.html

+ 2 - 2
js/reveal.js

@@ -193,7 +193,7 @@
 			// Default settings for or auto-animate transitions, can be
 			// overridden per-slide via data arguments
 			autoAnimateEasing: 'ease',
-			autoAnimateDuration: 0.7,
+			autoAnimateDuration: 1.0,
 
 			// CSS styles that auto-animations will animate between
 			autoAnimateStyles: [
@@ -3893,7 +3893,7 @@
 				to.style[propertyName] = toProps[propertyName];
 			} );
 
-		}, 1 );
+		}, 0 );
 
 	}
 

+ 29 - 2
test/examples/auto-animate.html

@@ -19,19 +19,46 @@
 			<div class="slides">
 
 				<section data-auto-animate>
+					<h3 data-id="opacity-title">Fade and slide</h3>
 					<h3 data-id="opacity-test">Opacity 1.0</h3>
 				</section>
-				<section data-auto-animate data-auto-animate-duration="0.3">
+				<section data-auto-animate>
+					<h3 data-id="opacity-title">Fade and slide</h3>
 					<h3 data-id="opacity-test" style="opacity: 0.2; margin-top: 200px;">Opacity 0.2</h3>
 				</section>
 
 				<section data-auto-animate>
-					<h3 data-id="text-props" style="background: #555;">Text props</h3>
+					<h3 data-id="text-props" style="background: #555; line-height: 1em; letter-spacing: 0em;">Text props</h3>
 				</section>
 				<section data-auto-animate>
 					<h3 data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Text props</h3>
 				</section>
 
+				<section data-auto-animate>
+					<h3>Swapping list items</h3>
+					<ul>
+						<li data-id="li-1">One</li>
+						<li data-id="li-2">Two</li>
+						<li data-id="li-3">Three</li>
+					</ul>
+				</section>
+				<section data-auto-animate>
+					<h3>Swapping list items</h3>
+					<ul>
+						<li data-id="li-2">Two</li>
+						<li data-id="li-1">One</li>
+						<li data-id="li-3">Three</li>
+					</ul>
+				</section>
+				<section data-auto-animate>
+					<h3>Swapping list items</h3>
+					<ul>
+						<li data-id="li-2">Two</li>
+						<li data-id="li-3">Three</li>
+						<li data-id="li-1">One</li>
+					</ul>
+				</section>
+
 				<section data-auto-animate style="height: 600px">
 					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 1</h2>
 					<h2 data-id="title" style="margin-top: 260px;">Animate Anything</h2>