| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung |
| de:modul:m291:learningunits:lu05:theorie:b_transistions [2026/03/08 19:06] – gkoch | de:modul:m291:learningunits:lu05:theorie:b_transistions [2026/03/09 00:30] (aktuell) – gkoch |
|---|
| ====== LU05b – CSS Transitions ====== | ====== LU05b – CSS Transitions ====== |
| | |
| | {{:de:modul:m291:learningunits:lu05:theorie:faq-toggle-transistion.gif?nolink|}} |
| |
| ===== CSS Transitions – Grundprinzip ===== | ===== CSS Transitions – Grundprinzip ===== |
| </WRAP> | </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. | |
| |
| |
| height: auto; | height: auto; |
| opacity: 1; | opacity: 1; |
| overflow: clip; | |
| } | } |
| </code> | </code> |
| Das Öffnen und Schliessen wird weiterhin per JavaScript durch ''classList.add('open')'' / ''classList.remove('open')'' gesteuert – die Animation läuft vollständig in CSS. | Das Öffnen und Schliessen wird weiterhin per JavaScript durch ''classList.add('open')'' / ''classList.remove('open')'' gesteuert – die Animation läuft vollständig in CSS. |
| |
| ==== overflow: hidden vs. overflow: clip ==== | |
| |
| Im geschlossenen Zustand verwenden wir ''overflow: hidden'', im offenen ''overflow: clip''. Der Unterschied: | |
| |
| * ''overflow: hidden'' erzeugt einen neuen Scroll-Container (Block Formatting Context), was in manchen Layouts zu unerwünschten Nebeneffekten führen kann. | |
| * ''overflow: clip'' schneidet Inhalte ab, ohne einen Scroll-Container zu erzeugen – und harmoniert besser mit modernen Transitions. | |
| |
| |
| </WRAP> | </WRAP> |
| |
| <WRAP important round 80%> | <WRAP important round center 80%> |
| **Browser-Support:** ''@starting-style'' und ''display allow-discrete'' sind noch **nicht von allen Browsern unterstützt** (Stand 2026: kein Firefox-Support). Für produktive Projekte wird die stabilere Lösung mit ''interpolate-size'' und ''height: 0 → auto'' empfohlen, die im Accordion-Projekt eingesetzt wird. | **Browser-Support:** ''@starting-style'' und ''display allow-discrete'' werden **in allen modernen Browsern unterstützt** (Chrome, Firefox, Safari). |
| |
| Aktuellen Support prüfen: [[https://caniuse.com/mdn-css_at-rules_starting-style|caniuse.com – @starting-style]] | Das eigentliche Kompatibilitätsproblem liegt bei ''interpolate-size: allow-keywords'': Diese Eigenschaft wird aktuell **nur von Chrome/Edge** unterstützt – Safari und Firefox kennen sie noch nicht. In diesen Browsern springt das Panel beim Öffnen abrupt auf ''height: auto'', ohne Animation. |
| | |
| | Aktuellen Support prüfen: [[https://caniuse.com/mdn-css_properties_interpolate-size|caniuse.com – interpolate-size]] |
| </WRAP> | </WRAP> |
| |
| |
| 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. | 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> |
| | |
| |
| |
| |
| |