Change dialog animation

Flow
1

Hi, I want to change the dialog animation.
there is a Cookbook example How do I make a dialog slide in (open) & out (close) - Vaadin Cookbook
But it uses the old styling.

I am not sure how to change it to work with the new styling. This is what I have tried:

/* Lightbox dialog overlay animation timing */
vaadin-dialog-overlay.lightbox-dialog[opening],
vaadin-dialog-overlay.lightbox-dialog[closing] {
    animation-duration: 200ms;
}

/* Opening animation on overlay part */
vaadin-dialog-overlay.lightbox-dialog[opening]::part(overlay) {
    animation: lightbox-zoom-in 200ms ease-out forwards;
}

/* Closing animation on overlay part */
vaadin-dialog-overlay.lightbox-dialog[closing]::part(overlay) {
    animation: lightbox-zoom-out 150ms ease-in forwards;
}

/* Lightbox overlay styling */
vaadin-dialog-overlay.lightbox-dialog::part(overlay) {
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

vaadin-dialog-overlay.lightbox-dialog::part(content) {
    overflow: hidden;
    padding: 0;
}

With adding the lightbox-dialog class to the Dialog.

2

Which version of Vaadin are you using?

3

V24.9.6+
When I drop the :part selector then the complete dialog including the backdrop is animated in/out. Also using :part(content) does not seem to work.

4

Which browser did you test this with? I think you might be hitting a limitation regarding animating shadow DOM parts. I forget the specific details, but for example, Chrome behaves differently than Safari.

In one you need to define the animation keyframes within the shadow DOM, where the part is, while in the other the keyframe definition needs to be in the same style scope as the selector that uses it. Here’s one reference I could find: Author-defined CSS names and shadow DOM: In specification and in practice  |  CSS and UI  |  Chrome for Developers

And a related spec issue: [css-animations-1] @keyframes referencing from shadow roots does not match spec in any browser · Issue #10540 · w3c/csswg-drafts · GitHub

So if you define the animation properties using the ::part() selector, the keyframes need to be in both scopes, light DOM and shadow DOM of the component. And the only way to add custom keyframes into the shadow DOM is by using the themes/[my-theme]/components/[component-name].css files (which is deprecated in V25).

5

Thanks, adding the keyframes to the shadow dom fixed it :+1:
Regarding the V25 deprecation, what is the appropriate replacement or will there come some until removal?

6

An additional question regarding this: My keyframes have a opacity defined, but this doesnt seems to be applied. What is causing that?

7

For V25, my idea/plan is to offer a set of predefined animation options you can configure, namely opacity, scale, and translate. Could probably consider different rotation axis as well, but those feel a bit niche.

A had a few months old prototype which I rebased, reworked, and pushed as a draft PR: experiment: general-purpose overlay animations by jouni · Pull Request #10693 · vaadin/web-components · GitHub

1 Like
8

Hard to say without seeing the code and/or inspecting it in a browser.