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 {
    }
}

Vaadin动画师的例子不适用于布局

1 个答案: