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

refactored and improved auto-animate matcher, supports line-by-line code animations

Browse Source
This commit is contained in:
Hakim El Hattab
2020-02-28 16:13:28 +01:00
parent 345ec01f19
commit e2a2c2c022
4 changed files with 179 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,7 +23,7 @@
<h3>Auto-Animate Example</h3>
<p>This will fade out</p>
<img src="assets/image1.png" style="height: 100px;">
<pre><code class="hljs" data-trim>
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
function Example() {
const [count, setCount] = useState(0);
}
@ -34,8 +34,9 @@
<p style="opacity: 0.2; margin-top: 200px;">This will fade out</p>
<p>This element is unmatched</p>
<img src="assets/image1.png" style="height: 100px;">
<pre><code class="hljs" data-trim>
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
function Example() {
New line!
const [count, setCount] = useState(0);
}
</code></pre>
@ -48,6 +49,36 @@
<p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Line Height & Letter Spacing</p>
</section>
<section data-auto-animate>
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
...
);
}
</code></pre>
</section>
<section data-auto-animate>
<pre data-id="code"><code data-line-numbers class="hljs" data-trim>
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 data-auto-animate>
<h3>Swapping list items</h3>