Search code examples
cssvaadinvaadin-flowvaadin14

Fade-Out Animation for Dialogs in Vaadin 14+

I'm wondering if there is a way to set the fadeout animation of dialogs in vaadin-flow 14.

In Vaadin 8 you could use the css classes "v-window-animate-in" and "v-window-animate-out" to archive this.

Since the div of dialog overlay div is in the shadow-dom i can not access it easly through css.

Solution

  • Yes, it’s possible. And the default Lumo theme actually has a built-in close animation, but I suppose it’s so subtle you can miss it :)

    Here you can find the built-in animations: https://github.com/vaadin/web-components/blob/master/packages/dialog/theme/lumo/vaadin-dialog-styles.js#L35-L67

    Basically, you add an animation property to the host element when it has the [closing] attribute set on it (:host([closing])). The host element animation is used to track when the dialog can be removed from the DOM, so we are using a “dummy” animation on it with the same duration as the actual animations on the [part="overlay"] element. You can also animation the backdrop element ([part="backdrop"]).