Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu12:aufgaben:a_keyframes [2026/05/18 09:55] – angelegt gkoch
+++ de:modul:m291:learningunits:lu12:aufgaben:a_keyframes [2026/05/18 10:20] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
-====== LU12a - FAQ-Accordion mit Animationen erweitern ======
+====== LU12b - FAQ-Accordion mit Animationen erweitern ======
 Sie haben die Theorie zu CSS Keyframe Animationen gelesen. Jetzt wenden Sie das Gelernte direkt an: Sie erweitern Ihr bestehendes FAQ-Accordion mit drei Animationen, die die User-Experience verbessern.
@@ Zeile 18: / Zeile 18: @@
 ^ Animation              ^ Datei               ^ Wann                                        ^
 | **Spinner**            | ''Accordion.vue''   | Während die Daten von der API laden         |
-| **Fade-in mit Stagger**| ''Accordion.vue''   | Wenn die FAQ-Items nach dem Laden erscheinen|
+| **Fade-in mit Treppeneffekt**| ''Accordion.vue''   | Wenn die FAQ-Items nach dem Laden erscheinen|
 | **Einblenden**         | ''AccordionItem.vue''| Wenn eine Antwort aufgeklappt wird         |
 </WRAP>
@@ Zeile 81: / Zeile 81: @@
-===== Teil B – Fade-in mit Stagger: FAQ-Items erscheinen nacheinander =====
+===== Teil B – Fade-in mit Treppeneffekt: FAQ-Items erscheinen nacheinander =====
 Wenn die Daten geladen sind und die Items erscheinen, wirkt es eleganter, wenn sie nicht alle gleichzeitig aufpoppen — sondern leicht versetzt nacheinander eingeblendet werden.
@@ Zeile 217: / Zeile 217: @@
 </WRAP>
 **Frage:** Warum sind die Keyframes ''0%'' und ''100%'' identisch? Was würde passieren, wenn ''100%'' auf ''translateY(-10px)'' gesetzt würde?
+<WRAP center round download 80%>
+Unter folgendem Link können Sie meine finale Umsetzung des Accordions (Accordion.vue und AccordionItem.vue) herunterladen und mit Ihrem eigenen Code vergleichen.
+{{ :de:modul:m291:learningunits:lu12:aufgaben:finale_accordion_komponten.zip | Finale Accordion-Komponenten}}
+</WRAP>