Question

我正在试图弄清楚如何制作这样的作品：

qx.Class.define("effects.Application",
{
extend : qx.application.Standalone,
members :
{
main : function()
{
    // Call super class
    this.base(arguments);

    // Enable logging in debug variant
    if (qx.core.Environment.get("qx.debug"))
    {
        // support native logging capabilities, e.g. Firebug for Firefox
        qx.log.appender.Native;
        // support additional cross-browser console. Press F7 to toggle visibility
        qx.log.appender.Console;
    }

    var button = new qx.ui.form.Button("First Button");
    var fadeToggle = new qx.fx.effect.core.Fade(button.getContainerElement().getDomElement());
    fadeToggle.set({
       from : 1.0,
       to : 0.0
    });

    var doc = this.getRoot();
    doc.add(button);

    button.addListener("execute", function() {
        fadeToggle.start();
    },this);
}
}
});

这是整个Application.js 只是试图在没有运气的情况下对某些事情产生影响。这就像qooxdoo忽略了效果

Answer 1

问题是DOM元素。执行时

button.getContainerElement().getDomElement()

它尚未出现在DOM树中。所以函数的返回值是null。 Qooxdoo有一个渲染队列，所以你在程序中做的表现大多是延迟了一点。使用“出现”事件解决此问题：

var button = new qx.ui.form.Button("First Button").set({
    enabled: false
});
var doc = this.getRoot();
button.addListener('appear',function(){
    var fadeToggle = new qx.fx.effect.core.Fade(
        button.getContainerElement().getDomElement()
    ).set({
        from : 1.0,
        to : 0.0
    });
    button.addListener('execute',function(){
        fadeToggle.start();
    });
    button.setEnabled(true);  
});

禁用和启用按钮的位只是为了炫耀......它会如此之快，以至于没有人会注意到。

框架中还有几个* .flush（）方法可以强制渲染立即发生，所以调用它们（正确的:-)）也可能是一个选项...但是因为JS应该是在可能的情况下异步写入，以上可能是正确的事情。

Answer 2

您也可以查看

相应的manual page
动画演示的代码，例如this（虽然我承认他们主要将动画挂钩到用户操作）

如何让qooxdoo效果起作用？

2 个答案: