From 2b53e3e2ef985a01fecede6a5854428391d83726 Mon Sep 17 00:00:00 2001 From: Quentin Dufour Date: Fri, 26 Nov 2021 15:51:03 +0100 Subject: =?UTF-8?q?Ajout=20pr=C3=A9sentation=20et=20programme=20du=2011/12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2021-11-13/garage/examples/auto-animate.html | 194 +++++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 static/presentations/2021-11-13/garage/examples/auto-animate.html (limited to 'static/presentations/2021-11-13/garage/examples/auto-animate.html') diff --git a/static/presentations/2021-11-13/garage/examples/auto-animate.html b/static/presentations/2021-11-13/garage/examples/auto-animate.html new file mode 100644 index 0000000..42484be --- /dev/null +++ b/static/presentations/2021-11-13/garage/examples/auto-animate.html @@ -0,0 +1,194 @@ + + + + + + + reveal.js - Auto Animate + + + + + + + + + + +
+ +
+
+

Auto-Animate Example

+

This will fade out

+ + 

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

Auto-Animate Example

+

This will fade out

+

This element is unmatched

+ + 

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

Line Height & Letter Spacing

+
+
+

Line Height & Letter Spacing

+
+ +
+
+ 

+							import React, { useState } from 'react';
+
+							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>
+							  );
+							}
+
+
+
+ 

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

Swapping list items

+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
+
+
+

Swapping list items

+
    +
  • Two
    • +
  • One
    • +
  • Three
    • +
+
+
+

Swapping list items

+
    +
  • Two
    • +
  • Three
    • +
  • One
    • +
+
+
+ +
+

SLIDE 1

+

Animate Anything

+
+
+
+
+
+
+

SLIDE 2

+

With Auto Animate

+
+
+
+
+
+
+

SLIDE 3

+

With Auto Animate

+
+
+
+
+
+
+

SLIDE 3

+

With Auto Animate

+
+
+
+
+
+ +
+

data-auto-animate-id="a"

+

A1

+
+
+

data-auto-animate-id="a"

+

A1

+

A2

+
+
+

data-auto-animate-id="b"

+

B1

+
+
+

data-auto-animate-id="b"

+

B1

+

B2

+
+ +
+ +
+ + + + + + + -- cgit v1.2.3