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

【问题标题】：GWT - CSS animation after adding element to the pageGWT - 向页面添加元素后的 CSS 动画
【发布时间】：2013-08-06 13:22:29
【问题描述】：

如果单击按钮，我想在页面上添加标签并通过 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;
}

【问题讨论】：

一月，这可能会有所帮助stackoverflow.com/questions/14250659/…
实际上，如果可能的话，我想用 CSS 而不是 javascript，因为它更有效。

标签： java javascript css gwt

【解决方案1】：

可能你必须在删除隐藏类之前添加一些延迟功能。

这里有示例（在 JS 中，但只是为了展示）：

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

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

我在 google 上找到的另一种方式：

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

【讨论】：