2

我正在尝试弄清楚如何使这样的工作：

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 忽略了效果

4

2 回答 2

4

问题在于 DOM 元素。当你执行

button.getContainerElement().getDomElement()

它还没有出现在 DOM 树中。所以函数的返回值为null. Qooxdoo 有一个渲染队列，所以你在程序中所做的事情的表现大多会延迟一点。使用 'appear' 事件来解决这个问题：

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 应该在任何时候异步编写可能，以上可能是正确的做法。

于 2011-06-14T04:35:43.573 回答
1

您可能还想看看

  • 相应的手册页
  • 动画演示的代码，例如这个（尽管我承认他们主要将动画与用户操作挂钩）
于 2011-06-14T08:30:47.847 回答