Vaadin 动画师示例不适用于布局

Question

我想在 Vaadin 中看到一些淡入淡出 Animator 的示例，每次我尝试在按钮单击后为某些布局或组件设置动画时都不起作用

    @SpringComponent
    @UIScope
    public class MockFormUI extends GridLayout { .... }

    public class VaadinMainUI extends UI {

    @Autowired
    private MockFormUI mockForm;

    Button b = new Button("TODO");
    b.addClickListener(e -> {
            mock = MockGenerator.generateFullMock();
            binder.setBean(mock);
            Animator.animate(mockForm, new Css().translateX("100px")).delay(1000).duration(2000);

Answer 1

不知道你在做什么，但是这个来自一个新的 maven 项目的非常基本的例子是有效的。 当您单击按钮时，文本输入字段会消失

@Theme("mytheme")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();

        final TextField name = new TextField();
        name.setCaption("Type your name here:");

        GridLayout gl= new GridLayout(2,2);
        gl.addComponent(new Label("GL 1.1"));
        gl.addComponent(new Label("GL 1.2"));
        gl.addComponent(new Label("GL 2.1"));
        gl.addComponent(new Label("GL 2.2"));

        Button button = new Button("Click Me");
        button.addClickListener(e -> {
            layout.addComponent(new Label("Thanks " + name.getValue() 
                    + ", it works!"));

            Animator.animate(gl, new Css().opacity(0));
            Animator.animate(gl, new Css().translateX("100px")).delay(1000).duration(5000);

        });

        layout.addComponents(name, button);

        setContent(layout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}