From 84b2fb42c6bbdbe7ca596f1cfc3c42d9a8a78968 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 11 Feb 2020 18:37:14 +0100 Subject: [PATCH] demo and auto-animate example updates --- demo.html | 26 +++++------ js/reveal.js | 82 +++++++++++++++++---------------- test/examples/auto-animate.html | 28 +++++------ 3 files changed, 67 insertions(+), 69 deletions(-) diff --git a/demo.html b/demo.html index cf05e881..c3644e5e 100644 --- a/demo.html +++ b/demo.html @@ -242,22 +242,22 @@

Pretty Code


-import React, { useState } from 'react';
+						import React, { useState } from 'react';
 
-function Example() {
-  const [count, setCount] = useState(0);
+						function Example() {
+						  const [count, setCount] = useState(0);
 
-  return (
-    <div>
-      <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>
-        Click me
-      </button>
-    </div>
-  );
-}
+						  return (
+						    <div>
+						      <p>You clicked {count} times</p>
+						      <button onClick={() => setCount(count + 1)}>
+						        Click me
+						      </button>
+						    </div>
+						  );
+						}
-

Code syntax highlighting courtesy of highlight.js.

+

Code syntax highlighting courtesy of highlight.js.

diff --git a/js/reveal.js b/js/reveal.js index 2943619c..6b61a1bf 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -3879,40 +3879,6 @@ } - /** - * 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} [inheritOptions] optional set of options - * to inherit as a base - */ - function getAutoAnimateOptions( element, inheritOptions ) { - - var options = { - easing: config.autoAnimateEasing, - duration: config.autoAnimateDuration, - delay: 0 - }; - - if( inheritOptions ) extend( options, inheritOptions ); - - 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; - - } - /** * Auto-animates the properties of an element from their original * values to their new state. @@ -3932,11 +3898,11 @@ to.dataset.autoAnimateTarget = id; // Each element may override any of the auto-animate options - // like transition easing, duration and delay + // like transition easing, duration and delay via data-attributes var options = getAutoAnimateOptions( to, slideOptions ); - // Individual transition settings can be overridden via - // element options + // 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; @@ -3994,10 +3960,46 @@ } + /** + * 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} [inheritOptions] optional set of options + * to inherit as a base + */ + function getAutoAnimateOptions( element, inheritOptions ) { + + var options = { + easing: config.autoAnimateEasing, + duration: config.autoAnimateDuration, + delay: 0 + }; + + if( inheritOptions ) extend( options, inheritOptions ); + + 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 respective values. + * that can be auto-animated for the given element and + * their current computed values. + * + * @param {String} direction 'from' or 'to' */ function getAutoAnimatableProperties( direction, element, elementOptions ) { @@ -4070,7 +4072,7 @@ * Identifies matching elements between slides. * * You can specify a custom matcher function by using - * the autoAnimateMatcher config option. + * the `autoAnimateMatcher` config option. */ function findAutoAnimatePairs( fromSlide, toSlide ) { diff --git a/test/examples/auto-animate.html b/test/examples/auto-animate.html index b8fca80a..bb982f57 100644 --- a/test/examples/auto-animate.html +++ b/test/examples/auto-animate.html @@ -20,32 +20,32 @@
-

Auto-Matched Content (no IDs)

+

Auto-Animate Example

This will fade out

- 

-function Example() {
-  const [count, setCount] = useState(0);
-}
+					

+						function Example() {
+						  const [count, setCount] = useState(0);
+						}
-

Auto-Matched Content (no IDs)

+

Auto-Animate Example

This will fade out

This element is unmatched

- 

-function Example() {
-  const [count, setCount] = useState(0);
-}
+					

+						function Example() {
+						  const [count, setCount] = useState(0);
+						}
-

Text props

+

Line Height & Letter Spacing

-

Text props

+

Line Height & Letter Spacing

@@ -80,7 +80,6 @@ function Example() {
-

SLIDE 2

@@ -89,7 +88,6 @@ function Example() {
-

SLIDE 3

@@ -98,7 +96,6 @@ function Example() {
-

SLIDE 3

@@ -107,7 +104,6 @@ function Example() {
-