GWT-将元素添加到页面后的CSS动画

Question

If the button is clicked, I want to add a Label to page and fade it in via an CSS animation. I thougt, I could just create and add the label with the CSS class "hidden" attached, which has the opacity = 0 and after that remove the class and CSS will do the rest. But i was wrong. GWT seems to execute the code in the onClick() in some kind of bulk mode -> The label gets added already without the "hidden" class. How can i prevent or do it that better? If I add/remove the "hidden" class manually in the browser, the animation works finde.

The java code looks like this:

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 sieht folgendermaßen aus:

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

Answer 1

Probably you have to add some delay function before remove hidden class.

Here you have example (in JS but it's only to show):

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

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

And another way I found on google:

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