Vaadin 14：如何从另一个线程更新组件的 css 样式？

Question

所以我在使用 Vaadin Flow 14 时遇到了这个问题，我有一个在 CSS 中同时使用 position: static 和 position: absolute 的组件。它还有一个很酷的动画，我需要同时使用这两个位置，这样它看起来才不会很奇怪，可以占据所有屏幕，也可以滚动。

它的行为如下：

组件在其 CSS 文件中以 position: static 开头（可以滚动）
单击组件并使用方法 getStyle().set() 设置 position: absolute，它会占用所有 window
关闭组件，它返回到 position: static 这样它就可以在它的父级中并且可以滚动

问题出在第 3 步。我通过使用 getStyle().remove() 删除绝对值来设置 position: static。我正在从另一个线程执行此操作，因此我可以在动画完成后删除样式，这样它看起来并不奇怪，与打开组件时的流程相同并且没有跳切.

样式已从组件中删除，但不会立即更新并且组件无法滚动，因为它的位置仍然是绝对的。但是，如果我单击 link 转到另一个新选项卡并返回到主选项卡，它现在已更新并且组件处于静态位置。

我试图通过在我的主 class 上添加 @Push 来解决这个问题，但它不起作用，因为我在视图中有视图，这是嵌套视图之一的自定义组件，它不是' t 主要 class。我必须能够按照删除样式的方式从组件本身更新它。我只想让组件等到动画播放完毕，然后删除它的位置，这是我能找到的唯一方法，任何其他尝试都不会等待动画播放，而是立即更新自身。

这是我用来去除样式的线程代码。

new Thread(() -> {
            try {
                Thread.sleep(500);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            this.getUI().get().access(() -> {
                getContent().getStyle().remove("position");
            });
        }).start();

Answer 1

已解决！

以当前UI为例，手动设置推送配置。

UI currentUI = UI.getCurrent();
currentUI.getPushConfiguration().setPushMode(PushMode.MANUAL);

并在线程中的代码末尾添加：

currentUI.push();

完全按照预期工作。

Vaadin 14：如何从另一个线程更新组件的 css 样式？

Vaadin 14: How to update a css style for a component from another thread?

css

java

animation

vaadin

vaadin-flow