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

Question

如果單擊該按鈕，我想在頁面上添加標簽，然后通過CSS動畫淡入標簽。 我想，我可以創建並添加帶有CSS類“ hidden”的標簽，該標簽的不透明度= 0，然后刪除該類，其余的工作由CSS完成。 但是我錯了。 GWT似乎以某種批量模式執行onClick()中的代碼->標簽已被添加而沒有“ hidden”類。 我該如何預防或做得更好？ 如果我在瀏覽器中手動添加/刪除“隱藏”類，則動畫將自動查找。

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);

Das 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");
});    

我在Google上找到的另一種方式：

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