gwt - 如何在两个面板之间进行移动过渡动画？

Question

我在 gwt 中有两个面板 (A和)。B

首先A是显示和B隐藏。如果我单击一个按钮，则会A隐藏并B显示。

但是，我希望有moving transitions animation两个面板之间，即，如果我单击按钮，A移开并B移入等。

我可以通过 gwt 实现吗？

Answer 1

首先，您可以将DeckPanel与 setAnimationEnabled(boolean enable) 一起使用。

如果你不喜欢 DeckPanel，你也可以像这样创建自己的动画：

public class SlideAnimation extends Animation
{
    private final Widget widget;
    private boolean         opening;

    public SlideAnimation(Widget widget)
    {
        this.widget = widget;
    }

    @Override
    protected void onComplete()
    {
        if(! opening)
            this.widget.setVisible(false);

        DOM.setStyleAttribute(this.widget.getElement(), "height", "auto");
    }

    @Override
    protected void onStart()
    {
        super.onStart();
        opening = ! this.widget.isVisible();

        if(opening)
        {
            DOM.setStyleAttribute(this.widget.getElement(), "height", "0px");
            this.widget.setVisible(true);
        }

    }

    @Override
    protected void onUpdate(double progress)
    {
        int scrollHeight = DOM.getElementPropertyInt(this.widget.getElement(), "scrollHeight");
        int height = (int) (progress * scrollHeight);
        if( !opening )
        {
            height = scrollHeight - height;
        }
        height = Math.max(height, 1);
        DOM.setStyleAttribute(this.widget.getElement(), "height", height + "px");
    }
}

然后将处理程序添加到您的按钮：

@UiHandler("myButton")
protected void handleClick(ClickEvent event)
{
    myAnimation.run(180); // myAnimation should be initialized in your constructor
}

这只是一个示例，但我认为您可以通过一些更改来做您想做的事情。