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

GWT - CSS animation after adding element to the page

本文关键字：GWT-CSS 动画 元素 添加      更新时间：2023-09-26

如果点击按钮，我想在页面中添加一个标签，并通过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);

CSS遵循以下原则：

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

在删除隐藏类之前，可能需要添加一些延迟函数。

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

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

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

我在谷歌上找到了另一种方法：

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

相关文章：