gwt - 2つのパネル間でトランジションアニメーションを移動するにはどうすればよいですか？

Question

gwtに2つのパネル（AとB）があります。

最初Aは表示され、非表示にBなっています。ボタンをクリックすると、非表示にAなってB表示されます。

ただし、2つのパネルの間に配置したいのですがmoving transitions animation、つまり、ボタンをクリックするAと、離れたり入ったりしますB。

gwtを介してそれを達成できますか？

Answer 1

まず、setAnimationEnabled（boolean enable）でDeckPanelを使用できます。

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
}

これは単なる例ですが、いくつかの変更を加えることで、やりたいことができると思います。