{"id":3559,"date":"2024-08-28T12:11:01","date_gmt":"2024-08-28T17:11:01","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3559"},"modified":"2024-09-13T11:51:23","modified_gmt":"2024-09-13T16:51:23","slug":"the-dialog-element-with-entry-and-exit-animations","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-dialog-element-with-entry-and-exit-animations\/","title":{"rendered":"The Dialog Element with Entry *and* Exit Animations"},"content":{"rendered":"\n

Una Kravets blogged the other day that animating entry effects are now supported<\/a> in the latest stable version of all major browsers. The new cool<\/em> way to do it, that is. We’ve long had trickery like applying a @keyframe<\/code> animation with a to<\/code> frame that would behave like an “entry effect”, but it was a bit awkward and didn’t work in all situations. Specifically one like using the new and very useful <dialog><\/code> element. <\/p>\n\n\n\n

This bit of code says a lot:<\/p>\n\n\n

dialog<\/span>[open]<\/span> {\n  transition<\/span>: \n    translate 0.7s<\/span> ease-out, \n    display 0.7s<\/span> ease-out allow-discrete;\n\n  \/* Post-Entry (Normal) State *\/<\/span>\n  translate<\/span>: 0<\/span> 0<\/span>;\n\n  \/* Pre-Entry State *\/<\/span>\n  @starting-style {\n    translate<\/span>: 0<\/span> 100vh<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
There are two big things at work there:<\/p>\n\n\n\n
    \n
  1. The display<\/code> property is listed in the transitions, with the keyword allow-discrete<\/code>. The code for it is hidden in User-Agent stylesheets, but when a <dialog><\/code> moves from close (default) to open, the display<\/code> goes from none<\/code> to block<\/code>. Using this keyword means that the display<\/code> property is changed after<\/em> the animation timing, so animations can actually happen.<\/li>\n\n\n\n
  2. The @starting-style<\/code> gives us an opportunity to apply styling to the element just as it’s entering it’s current state<\/em>, meaning the transition will happen between the styles declared inside and outside that block.<\/li>\n<\/ol>\n\n\n\n
    Golf clap. Everything is awesome.<\/p>\n\n\n\n
    What Una didn’t<\/em> cover, on purpose surely, was exit<\/em> animations (because they aren’t in “Baseline” yet, meaning not supported across browsers). But they are<\/em> supported in Chrome-n-friends land, so I thought it was worth looking at. To me, they are just as interesting, cool, and useful as the entry kind.<\/p>\n\n\n\n
    Both Entry and Exit<\/h2>\n\n\n\n
    The trick isn’t terribly different than the code above, it’s just to have very specific styles for both the open and closed (i.e. :not([open])<\/code> states. Like this:<\/p>\n\n\n
    dialog<\/span> {\n<\/span><\/span>  --duration<\/span>: 0.34s<\/span>;\n<\/span><\/span>\n<\/span><\/span>  transition<\/span>: \n<\/span><\/span>    translate var<\/span>(--duration) ease-in-out, \n<\/span><\/span>    scale     var<\/span>(--duration) ease-in-out,\n<\/span><\/span>    filter    var<\/span>(--duration) ease-in-out,\n<\/span><\/span>    display   var<\/span>(--duration) ease-in-out allow-discrete;\n<\/span><\/mark>\n<\/span><\/span>  &[open] {\n<\/span><\/span>\n<\/span><\/span>    \/* Post-Entry (Normal) State *\/<\/span>\n<\/span><\/span>    translate<\/span>: 0<\/span> 0<\/span>;\n<\/span><\/span>    scale<\/span>: 1<\/span>;\n<\/span><\/span>    filter<\/span>: blur<\/span>(0<\/span>);\n<\/span><\/span>\n<\/span><\/span>    \/* Pre-Entry State *\/<\/span>\n<\/span><\/span>    @starting-style {\n<\/span><\/span>      translate<\/span>: 0<\/span> 8vh<\/span>;\n<\/span><\/span>      scale<\/span>: 1.15<\/span>;\n<\/span><\/span>      filter<\/span>: blur<\/span>(8px<\/span>);\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>\n<\/span><\/span>  \/* Exiting State *\/<\/span>\n<\/span><\/span>  &:not(<\/span>[open]<\/span>) {\n<\/span><\/span>    translate<\/span>: 0<\/span> -8vh<\/span>;\n<\/span><\/span>    scale<\/span>: 1.15<\/span>;\n<\/span><\/span>    filter<\/span>: blur<\/span>(8px<\/span>);\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Check it out:<\/p>\n\n\n\n