如何在ext4.0.2a中实现队列动画功能

how to make queue animation function in ext4.0.2a?

本文关键字：实现 队列 动画 功能 2a ext4      更新时间：2023-09-26

我正在尝试制作自己的加载屏幕。
这就像ext 3.3.1文档中的加载屏幕一样，但使用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);

但是，上面的代码看起来很尴尬，因为我使用了defer来使它排队。
是否有其他方法使排队函数?
在ext3中，他们使用回调函数使其工作，但我在ext4文档中找不到它。
我试过了，还是没有运气

可以指定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(结构。这是一种特殊的变通方法。它是必需的，因为puff有有限的参数集。和callback(由于一些错误，我猜。

这是demo。

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

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
相关文章：