java - GWT - 向页面添加元素后的 CSS 动画

Question

如果单击按钮，我想向页面添加标签并通过 CSS 动画将其淡入。我想，我可以创建并添加附加了 CSS 类“隐藏”的标签，它的不透明度 = 0，然后删除该类，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);

Das CSS sieht folgendermaßen aus:

.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