Question

我正在尝试制作自己的加载屏幕这就像在ext 3.3.1 docs上加载屏幕一样，但是使用ext 4作为核心......

因为ext4文档说不推荐使用shift动画。所以我用puff替换shift并滑动动画......

到目前为止，我可以做到.. 这里是代码;

var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');

loading.puff({duration: 500}); //first fn

Ext.defer(function(){
    mask.slideOut('b',{duration : 500});//second fn

    Ext.defer(function(){
        mask.destroy();
        loading.destroy();//third fn
    }, 750);

}, 750);

但是，上面的代码看起来很尴尬，因为我正在使用延迟使其排队还有另一种排队功能吗？
在ext3中，他们使用回调函数使其工作，但我无法在ext4文档中找到它我甚至尝试过，仍然没有运气。

Answer 1

您可以指定callback config：

loading.puff({duration: 500}).animate({callback: function(){
    mask.slideOut('b',{duration : 500, callback: function(){
        mask.destroy();
        loading.destroy();//third fn
    }});//second fn
}}); //first fn

注意loading.puff({duration: 500}).animate(构造。这是一个特殊的解决方法。这是必要的，因为粉扑有一组有限的参数。并且callback（由于某些错误，我很遗憾。它必须在那里）不包含在其中。

Here is demo

<强>更新

由于在动画完全结束时不调用callback，因此在某些情况下最好使用afteranimate事件（特别是在回调中调用loading.destroy();的情况）：< / p>

loading.puff({duration: 500}).animate({callback: function(){
    mask.slideOut('b',{duration : 500, listeners: {
        afteranimate: function(){
            mask.destroy();
            loading.destroy();//third fn
        }
    }});//second fn
}}); //first fn

如何在ext4.0.2a中创建队列动画功能？

1 个答案: