xobs/fossasia-22-renode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

auto-match animatable targets by their contents

Browse Source
This commit is contained in:
Hakim El Hattab
2020-02-03 11:13:47 +01:00
parent 3bfd06c06d
commit 452f62286b
2 changed files with 92 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,12 +19,14 @@
<div class="slides">
<section data-auto-animate>
<h3 data-id="opacity-title">Fade and slide</h3>
<h3 data-id="opacity-test">Opacity 1.0</h3>
<h3>Auto-Matched Content (no IDs)</h3>
<h3>This will fade out</h3>
<img src="assets/image1.png">
</section>
<section data-auto-animate>
<h3 data-id="opacity-title">Fade and slide</h3>
<h3 data-id="opacity-test" style="opacity: 0.2; margin-top: 200px;">Opacity 0.2</h3>
<h3>Auto-Matched Content (no IDs)</h3>
<h3 style="opacity: 0.2; margin-top: 200px;">This will fade out</h3>
<img src="assets/image1.png">
</section>
<section data-auto-animate>
@ -37,25 +39,25 @@
<section data-auto-animate>
<h3>Swapping list items</h3>
<ul>
<li data-id="li-1">One</li>
<li data-id="li-2">Two</li>
<li data-id="li-3">Three</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</section>
<section data-auto-animate>
<h3>Swapping list items</h3>
<ul>
<li data-id="li-2">Two</li>
<li data-id="li-1">One</li>
<li data-id="li-3">Three</li>
<li>Two</li>
<li>One</li>
<li>Three</li>
</ul>
</section>
<section data-auto-animate>
<h3>Swapping list items</h3>
<ul>
<li data-id="li-2">Two</li>
<li data-id="li-3">Three</li>
<li data-id="li-1">One</li>
<li>Two</li>
<li>Three</li>
<li>One</li>
</ul>
</section>