080: Animating to and from top-layer

Опубликовано 13 июня 2024, 21:00

In this episode Una and Adam continue talking about dialogs and popovers, but this time it's all about animating them into and out of the top layer.. We'll be introducing starting-style, a new mode for transitioning discrete properties, and the overlay property for smooth entry and exit animations.

Links
top-layer CSS spec → goo.gle/4c2elUW
Four new CSS features for smooth entry and exit animations by Una → goo.gle/3KpyB7e
Using @starting-style and transition-behavior for enter and exit stage effects → goo.gle/452FG7p
Popover on MDN → goo.gle/453xfss
:popover-open on MDN → goo.gle/3x5XLVl
Dialog and popover animated → goo.gle/3Kn1Ck7
Popover animated with nesting → goo.gle/3wW3Qns
What is the top layer? → goo.gle/457rUjQ
overlay property on MDN → goo.gle/3yKNRsT
MDN demos → goo.gle/4c2eIyO

Una Kravets (co-host)
Twitter → goo.gle/452aBRb
Instagram →
YouTube → goo.gle/457oMnS
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face Host of Tools Today → goo.gle/4aI6JpC &
Designing in the Browser 🎬 → goo.gle/4e4YTcM

Adam Argyle (co-host)
Twitter → goo.gle/3yFnHYu
Instagram → goo.gle/3wUb6QJ
YouTube → goo.gle/4dZNKK7
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
CSSWG → goo.gle/4bFErxq
VisBug → goo.gle/4bDcVQZ

The CSS Podcast
#CSSpodcast


Watch more The CSS Podcast → goo.gle/CSSpodcast
Subscribe to Chrome for Developers → goo.gle/ChromeDevs


#CSSPodcast #ChromeForDevelopers #Chrome


Speakers: Una Kravets, Adam Argyle