GWT - 將元素添加到頁面後的CSS動畫

Question

如果單擊該按鈕，我想添加一個標籤到頁面並通過CSS動畫淡入。我想，我可以創建並添加具有不透明度= 0的CSS「隱藏」類的標籤，然後刪除該類，CSS將完成剩下的工作。 但我錯了。 GWT似乎在某種批量模式下執行onClick()中的代碼 - >該標籤已被添加，而沒有「隱藏」類。我如何預防或做得更好？如果我在瀏覽器中手動添加/刪除「隱藏」類，則動畫將起作用。

Java代碼看起來是這樣的：

Button submitButton = new Button("send"); 

submitButton.addClickHandler(new ClickHandler() { 

    @Override 
    public void onClick(ClickEvent event) { 

     Label l = new Label("test"); 
     l.addStyleName("hidden"); 
     RootPanel.get().add(l); 

     l.removeStyleName("hidden"); 

    } 
}); 

RootPanel.get().add(submitButton); 

達斯CSS siehtfolgendermaßenAUS：

.gwt-Label{ 
    transition-property: opacity; 
    transition-duration: 1s; 
} 
.hidden{ 
    opacity:0; 
} 

Answer 1

也許你不得不之前加一些延時功能刪除隱藏的類。

在這裏，你有例子（JS，但它只能顯示）：

http://jsfiddle.net/matku/PXnPZ/

$(".myElement").delay(50).queue(function(){ 
     $(this).removeClass("hidden"); 
});  

而另一種方法，我在谷歌發現：

http://map-notes.blogspot.com/2012/11/fade-animation.html