隱藏/顯示動畫

Question

我想知道是否可以使用簡單的gwt（無需外部庫）在hide/show面板上製作動畫。

歡迎任何建議。

感謝

Answer 1

GWT的佈局類支持動畫。退房Layout，DockLayout en SplitLayout。此外，還有一個Animation類，它在幾個面板中用於使用動畫來顯示/隱藏內容。只需使用Animation類檢查這些類。

Answer 2

也許你會覺得這有用的代碼從NotificationMole：

private class MoleAnimation extends Animation { 
    private int endSize; 
    private int startSize; 

    @Override 
    protected void onComplete() { 
     if (endSize == 0) { 
     borderElement.getStyle().setDisplay(Display.NONE); 
     return; 
     } 
     borderElement.getStyle().setHeight(endSize, Unit.PX); 
    } 

    @Override 
    protected void onUpdate(double progress) { 
     double delta = (endSize - startSize) * progress; 
     double newSize = startSize + delta; 
     borderElement.getStyle().setHeight(newSize, Unit.PX); 
    } 

    void animateMole(int startSize, int endSize, int duration) { 
     this.startSize = startSize; 
     this.endSize = endSize; 
     if (duration == 0) { 
     onComplete(); 
     return; 
     } 
     run(duration); 
    } 
    } 

用法：

• 隱藏面板：

  animation.animateMole（heightMeasure.getOffsetHeight（） 0， animationDuration）;

• 顯示：

  borderElement.getStyle（）setDisplay（Display.BLOCK）;
  animation.animateMole（0，heightMeasure.getOffsetHeight（），animationDuration）;

凡borderElement - 容器的DivElement和heightMeasure - 內部的DivElement。