Verzögert erscheinde Elemente
Elemente können später eingeblendet werden. Dafür stehen verschiedene Zeiten zur Verfügung.
Hier erscheinen nacheinander sechs Buttons.
<button class="verzoegert--5">Hallo, Welt</button>
<button class="verzoegert--10">Hallo, Welt</button>
<button class="verzoegert--20">Hallo, Welt</button>
<button class="verzoegert--30">Hallo, Welt</button>
<button class="verzoegert--60">Hallo, Welt</button>
<button class="verzoegert--120">Hallo, Welt</button>
Die Zahl in der CSS-Klasse gibt dabei Sekunden an. Es stehen 5, 10, 20, 30, 60 und 120 Sekunden zur Verfügung.
Das funktioniert natürlich auch mit ganzen Boxen:
Aufklappbutton 1
Inhalt der eigentlichen Box.
Aufklappbutton 2
Inhalt der eigentlichen Box.
Aufklappbutton 3
Inhalt der eigentlichen Box.
<details class="information verzoegert--5">
<summary>Aufklappbutton 1</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
<details class="information verzoegert--10">
<summary>Aufklappbutton 2</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
<details class="information verzoegert--20">
<summary>Aufklappbutton 3</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
Für geschachtelte Boxen ist es sogar möglich, dass weitere Tipps jeweils nach z.B. 10 Sekunden erscheinen. Dabei startet die Zeit erst, wenn die Elternbox sichtbar ist.
Aufklappbutton 1
Inhalt der eigentlichen Box.
Aufklappbutton 2
Inhalt der eigentlichen Box.
Aufklappbutton 3
Inhalt der eigentlichen Box.
Die Animation funktioniert jedoch nur einmal nach Auslösung.
<details class="information verzoegert--10">
<summary>Aufklappbutton 1</summary>
<p>Inhalt der eigentlichen Box.</p>
<details class="information verzoegert--10">
<summary>Aufklappbutton 2</summary>
<p>Inhalt der eigentlichen Box.</p>
<details class="information verzoegert--10">
<summary>Aufklappbutton 3</summary>
<p>Inhalt der eigentlichen Box.</p>
</details>
</details>
</details>
