如何在兩個面板之間移動過渡動畫？

Question

我有兩個面板（A和B）以gwt。

第一個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 
} 

這只是一個例子但我認爲你可以做一些你想做的改變。