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