Vaadin 14+ 中对话框的淡出动画
Fade-Out Animation for Dialogs in Vaadin 14+
我想知道是否有办法在 vaadin-flow 14 中设置对话框的淡出动画。
在 Vaadin 8 中，您可以使用 css 类 "v-window-animate-in" 和 "v-window-animate-out" 来存档。
由于对话框覆盖 div 的 div 在阴影中-dom 我无法通过 css.
轻松访问它
是的，这是可能的。默认的 Lumo 主题实际上有一个 built-in 关闭动画，但我想它太微妙了，你可能会错过它:)
在这里您可以找到 built-in 动画：https://github.com/vaadin/web-components/blob/master/packages/dialog/theme/lumo/vaadin-dialog-styles.js#L35-L67
基本上，当宿主元素设置了 [closing] 属性 (:host([closing])) 时，您可以将 animation 属性 添加到宿主元素。宿主元素动画用于跟踪何时可以从 DOM 中删除对话框，因此我们在其上使用“虚拟”动画，其持续时间与 [part="overlay"] 元素上的实际动画相同。您还可以为背景元素设置动画 ([part="backdrop"])。
我想知道是否有办法在 vaadin-flow 14 中设置对话框的淡出动画。
在 Vaadin 8 中，您可以使用 css 类 "v-window-animate-in" 和 "v-window-animate-out" 来存档。
由于对话框覆盖 div 的 div 在阴影中-dom 我无法通过 css.
轻松访问它是的，这是可能的。默认的 Lumo 主题实际上有一个 built-in 关闭动画，但我想它太微妙了，你可能会错过它:)
在这里您可以找到 built-in 动画：https://github.com/vaadin/web-components/blob/master/packages/dialog/theme/lumo/vaadin-dialog-styles.js#L35-L67
基本上，当宿主元素设置了 [closing] 属性 (:host([closing])) 时，您可以将 animation 属性 添加到宿主元素。宿主元素动画用于跟踪何时可以从 DOM 中删除对话框，因此我们在其上使用“虚拟”动画，其持续时间与 [part="overlay"] 元素上的实际动画相同。您还可以为背景元素设置动画 ([part="backdrop"])。