From d0188cb4389a169ef28a5a759d8bc8d418cfd4a8 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 1 Mar 2020 10:21:30 +0100 Subject: [PATCH] add code animation example to demo.html --- demo.html | 57 +++++++++++++++---------- test/examples/auto-animate.html | 73 +++++++++++++++++++++------------ 2 files changed, 82 insertions(+), 48 deletions(-) diff --git a/demo.html b/demo.html index c3644e5..def4d26 100644 --- a/demo.html +++ b/demo.html @@ -88,6 +88,42 @@

+
+

Pretty Code

+

+						import React, { useState } from 'react';
+
+						function Example() {
+						  const [count, setCount] = useState(0);
+
+						  return (
+						    ...
+						  );
+						}
+					
+

Code syntax highlighting courtesy of highlight.js.

+
+ +
+

With animations

+

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

Point of View

@@ -239,27 +275,6 @@

-
-

Pretty Code

-

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

Code syntax highlighting courtesy of highlight.js.

-
-

Marvelous List

Auto-Animate Example

-

This will fade out

+

This will fade out

This element is unmatched

- +

 						function Example() {
 						  New line!
@@ -49,34 +49,53 @@
 					

Line Height & Letter Spacing

-
-

-						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 (
-						    ...
-						  );
-						}
-					
-
-
-

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

+							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> + ); + } +
+
+
+

+							function Example() {
+							  // A comment!
+							  const [count, setCount] = useState(0);
+
+							  return (
+							    <div>
+							      <p>You clicked {count} times</p>
+							      <button onClick={() => setCount(count + 1)}>
+							        Click me
+							      </button>
+							    </div>
+							  );
+							}
+						
+