xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add code animation example to demo.html

Browse Source
This commit is contained in:
Hakim El Hattab 2020-03-01 10:21:30 +01:00
parent e2a2c2c022
commit d0188cb438
2 changed files with 82 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
demo.html
View File

@ -88,6 +88,42 @@
</p> </p>
</section> </section>
<section data-auto-animate>
<h2 data-id="code-title">Pretty Code</h2>
<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
...
);
}
</code></pre>
<p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
</section>
<section data-auto-animate>
<h2 data-id="code-title">With animations</h2>
<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers="|4|4,8-11">
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
&lt;div&gt;
&lt;p&gt;You clicked {count} times&lt;/p&gt;
&lt;button onClick={() =&gt; setCount(count + 1)}&gt;
Click me
&lt;/button&gt;
&lt;/div&gt;
);
}
</code></pre>
</section>
<section> <section>
<h2>Point of View</h2> <h2>Point of View</h2>
<p> <p>
@ -239,27 +275,6 @@
</div> </div>
</section> </section>
<section>
<h2>Pretty Code</h2>
<pre><code class="hljs" data-trim data-line-numbers="4|9|4,8-11">
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
&lt;div&gt;
&lt;p&gt;You clicked {count} times&lt;/p&gt;
&lt;button onClick={() =&gt; setCount(count + 1)}&gt;
Click me
&lt;/button&gt;
&lt;/div&gt;
);
}
</code></pre>
<p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
</section>
<section> <section>
<h2>Marvelous List</h2> <h2>Marvelous List</h2>
<ul> <ul>

23
test/examples/auto-animate.html
View File

@ -31,9 +31,9 @@
</section> </section>
<section data-auto-animate data-auto-animate-unmatched="fade"> <section data-auto-animate data-auto-animate-unmatched="fade">
<h3>Auto-Animate Example</h3> <h3>Auto-Animate Example</h3>
<p style="opacity: 0.2; margin-top: 200px;">This will fade out</p> <p style="opacity: 0.2; margin-top: 100px;">This will fade out</p>
<p>This element is unmatched</p> <p>This element is unmatched</p>
<img src="assets/image1.png" style="height: 100px;"> <img src="assets/image1.png" style="height: 150px;">
<pre data-id="code"><code data-line-numbers class="hljs" data-trim> <pre data-id="code"><code data-line-numbers class="hljs" data-trim>
function Example() { function Example() {
New line! New line!
@ -49,6 +49,7 @@
<p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Line Height & Letter Spacing</p> <p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Line Height & Letter Spacing</p>
</section> </section>
<section>
<section data-auto-animate> <section data-auto-animate>
<pre data-id="code"><code data-line-numbers class="hljs" data-trim> <pre data-id="code"><code data-line-numbers class="hljs" data-trim>
import React, { useState } from 'react'; import React, { useState } from 'react';
@ -78,6 +79,24 @@
} }
</code></pre> </code></pre>
</section> </section>
<section data-auto-animate>
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
function Example() {
// A comment!
const [count, setCount] = useState(0);
return (
&lt;div&gt;
&lt;p&gt;You clicked {count} times&lt;/p&gt;
&lt;button onClick={() =&gt; setCount(count + 1)}&gt;
Click me
&lt;/button&gt;
&lt;/div&gt;
);
}
</code></pre>
</section>
</section>
<section> <section>
<section data-auto-animate> <section data-auto-animate>