如何使 qooxdoo 效果起作用？答案

【问题标题】：how to make qooxdoo effects work?如何使 qooxdoo 效果起作用？
【发布时间】：2011-06-13 22:57:46
【问题描述】：

我正在尝试弄清楚如何制作这样的东西：

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 忽略了影响

【问题讨论】：

标签： effects qooxdoo

【解决方案1】：

问题在于 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 应该是尽可能异步编写，以上可能是正确的做法。

【讨论】：

【解决方案2】：

你可能还想看看

对应的manual page
动画演示的代码，例如this（尽管我承认他们主要将动画与用户操作挂钩）

【讨论】：