| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung |
| de:modul:m291:learningunits:lu05:theorie:b_transistions [2026/03/08 19:04] – 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> |
| |
| ===== Warum reicht display: none nicht? ===== | ===== Antworten Ein- und Ausblenden mit 'display' ===== |
| |
| Im ersten Schritt haben wir die Panels mit ''display: none'' / ''display: block'' ein- und ausgeblendet. Das funktioniert – aber es gibt **keinen Übergang**, das Element erscheint und verschwindet abrupt. | Im ersten Schritt haben wir die Panels mit ''display: none'' / ''display: block'' ein- und ausgeblendet. Das funktioniert – aber es gibt **keinen Übergang**, das Element erscheint und verschwindet abrupt. |
| </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. | |
| |
| |
| |
| In sehr modernen Browsern gibt es eine noch elegantere Variante mit ''@starting-style'' und ''display allow-discrete''. Diese Technik erlaubt Transitionen auch beim **ersten Erscheinen** eines Elements, also direkt von ''display: none'' zu ''display: block'': | In sehr modernen Browsern gibt es eine noch elegantere Variante mit ''@starting-style'' und ''display allow-discrete''. Diese Technik erlaubt Transitionen auch beim **ersten Erscheinen** eines Elements, also direkt von ''display: none'' zu ''display: block'': |
| | <WRAP center round box 80%> |
| <code css> | <code css> |
| :root { | :root { |
| } | } |
| </code> | </code> |
| | </WRAP> |
| | |
| | <WRAP important round center 80%> |
| | **Browser-Support:** ''@starting-style'' und ''display allow-discrete'' werden **in allen modernen Browsern unterstützt** (Chrome, Firefox, Safari). |
| |
| <WRAP important> | 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. |
| **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. | |
| |
| Aktuellen Support prüfen: [[https://caniuse.com/mdn-css_at-rules_starting-style|caniuse.com – @starting-style]] | 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> |
| | |
| |
| |
| |
| |