When the button is clicked, I want to add a Label to the page and fade it in using a CSS animation. My initial thought was to create and add the label with the CSS class "hidden" attached, which sets the opacity to 0, and then remove the class to trigger the animation. However, this approach did not work as expected. It seems that GWT executes the code in the onClick() method in a bulk mode, causing the label to be added without the "hidden" class initially. How can I fix or improve this process? Manually adding/removing the "hidden" class in the browser results in the animation functioning correctly.
The Java code snippet 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);
Here is the corresponding CSS:
.gwt-Label{
transition-property: opacity;
transition-duration: 1s;
}
.hidden{
opacity:0;
}