Question

我在gwt中有两个面板（A和B）。

首先显示A并隐藏B。如果我点击某个按钮，A将被隐藏，并显示B。

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

我可以通过gwt实现吗？

Answer 1

首先，您可以将DeckPanel与setAnimationEnabled（布尔启用）一起使用。

如果您不喜欢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
}

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

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

1 个答案: