Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu05:theorie:b_transistions [2026/03/08 19:24] – gkoch
+++ de:modul:m291:learningunits:lu05:theorie:b_transistions [2026/03/09 00:30] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
 ====== LU05b – CSS Transitions ======
+{{:de:modul:m291:learningunits:lu05:theorie:faq-toggle-transistion.gif?nolink|}}
 ===== CSS Transitions – Grundprinzip =====
@@ Zeile 50: / Zeile 52: @@
 </WRAP>
-===== Die klassischen Workarounds =====
-Bis vor Kurzem gab es nur unbefriedigende Lösungen für sanfte Auf-/Zuklapp-Animationen:
-==== Workaround 1: opacity + visibility ====
-''opacity'' lässt sich animieren, aber das Element nimmt weiterhin Platz im Layout ein.
-==== Workaround 2: JavaScript ====
-Die tatsächliche Höhe per JavaScript berechnen (''element.scrollHeight'') und explizit als Pixel-Wert setzen. Mehr Code, mehr Komplexität, schwerer wartbar.
@@ Zeile 186: / Zeile 176: @@
 Im Accordion-Projekt verwenden wir ''ease-in-out'' – das Panel öffnet und schliesst sich jeweils mit einer leichten Verzögerung am Anfang und Ende, was natürlicher wirkt.
+<WRAP center round box 80%>
+Interaktives Beispiel mit Beispiel-Code: [[https://css-transitions.vercel.app|Externe Seite erkunden.]]
+[[https://css-transitions.vercel.app|{{ :de:modul:m291:learningunits:lu05:theorie:screenshot_2026-03-09_at_00.26.55.png?600 |}}]]
+</WRAP>