Vaadin 14+ 中对话框的淡出动画
我想知道是否有办法在 vaadin-flow 14 中设置对话框的淡出动画。
在 Vaadin 8 中，您可以使用 css 类“v-window-animate-in”和“v-window-animate-out”将此存档。
由于对话框覆盖 div 的 div 位于 Shadow-dom 中，我无法通过 css 轻松访问它。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
是的，这是可能的。默认的 Lumo 主题实际上有一个内置的关闭动画，但我想它太微妙了，你可能会错过它:)
在这里你可以找到内置动画：https://github.com/vaadin/web-components/blob/master/packages/dialog/theme/lumo/vaadin-dialog-styles.js#L35-L67
基本上，您添加一个 <当宿主元素设置了
[close]属性时，将 code>animation 属性添加到宿主元素 (:host([ opening])）。宿主元素动画用于跟踪何时可以从 DOM 中删除对话框，因此我们在其上使用“虚拟”动画，其持续时间与[part="overlay"]< 上的实际动画相同。 /代码> 元素。您还可以为背景元素设置动画 ([part="backdrop"])。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
animationproperty 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"]).