Wat is Discrete Transitie Generator?
CSS kon traditioneel niet overgaan tussen display:none en display:block. Met transition-behavior:allow-discrete en @starting-style zijn nu soepele transities mogelijk voor verschijnende en verdwijnende elementen zoals dialogen, popovers en accordeons.
Snel antwoord
Discrete transities maken CSS-transities mogelijk voor display:none en andere discrete eigenschappen. Gebruik @starting-style voor de beginstatus voordat het element verschijnt.
Last updated: 2026-05-25
Beperkingen
- Vereist Chrome 117+ of Safari 17.5+. Firefox achter een flag.
- @starting-style is verplicht voor de inganganimatie.
- Alleen enter/exit waar display verandert. Tussentijdse overgangen niet ondersteund.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Kies het elementtype: dialog, popover of accordeon.
- Stel enter/exit animatie-eigenschappen in zoals opacity en transform.
- De tool genereert @starting-style en transition CSS.
- Kopieer de CSS naar uw dialog, popover of details element.
Waarvoor je het kunt gebruiken
- Voeg een fade-in effect toe aan een dialog bij openen.
- Maak een slide-down animatie voor accordeons.
- Bouw soepele enter/exit animaties voor popovers.