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

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
}

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