GWT - CSS animation after adding element to the page

GWT - CSS animation after adding element to the page

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