问题描述
|
我正在尝试弄清楚如何进行以下工作:
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忽略了影响一样
解决方法
问题是DOM元素。执行时
button.getContainerElement().getDomElement()
它尚未出现在DOM树中。因此该函数的返回值为is2ѭ。 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应该在任何时候异步编写可能,以上可能是正确的做法。
, 您可能还想看看
相应的手册页
动画演示的代码,例如这(尽管我承认他们主要是将动画钩在用户操作上)