diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-02-03 11:13:47 +0100 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-02-03 11:13:47 +0100 |
| commit | 452f62286b5d61f0f8ddb7e5e59b9bc351a5fcc7 (patch) | |
| tree | 5cd45577bdf1f14bc3c9ae0c845fc550a590a5c8 /test | |
| parent | 3bfd06c06da6e3f7fa03959f498ef3ba001d180c (diff) | |
| download | fosdem-2021-minimalism-presentation-452f62286b5d61f0f8ddb7e5e59b9bc351a5fcc7.tar fosdem-2021-minimalism-presentation-452f62286b5d61f0f8ddb7e5e59b9bc351a5fcc7.tar.gz | |
auto-match animatable targets by their contents
Diffstat (limited to 'test')
| -rw-r--r-- | test/examples/auto-animate.html | 28 |
1 files changed, 15 insertions, 13 deletions
diff --git a/test/examples/auto-animate.html b/test/examples/auto-animate.html index 3b5a96b..a3a21e3 100644 --- a/test/examples/auto-animate.html +++ b/test/examples/auto-animate.html @@ -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> |