javascript - 为什么这在变形之前不 pauseFx？

Question

这个变形很好，但我需要它先暂停然后变形。

var animate = (function(){
    var div = document.getElement('div.es-transition');
    if (div){
        div.set('morph', {duration: 800, transition: 'quad:out'});
        div.pauseFx(1000, 'morph');
        div.addClass('hidden');
        div.setStyles({'visibility': 'hidden', 'opacity': 0});
        div.removeClass('hidden').fade('in');
    }
});

window.addEvent('load', animate);

撞头。

TIA

Answer 1

不知道pauseFx？这不是标准的 mootools-core api。它有http://mootools.net/docs/core/Fx/Fx#Fx:pause - 需要应用于实例。

在你的情况下，无论如何你在运行它之前暂停它是没有意义的。这意味着，使用setTimeoutor delay。pause是在中途停止并恢复变形/补间。请澄清您要达到的目标

还。.set('morph')不适用于.fade()- fade 是基于tween选项，而不是morph. tween 和 morph 之间的区别是单个属性与多个属性。

如果我理解正确，您需要重写为：

var animate = (function(){
    var div = document.getElement('div.es-transition');
    if (div){
        div.set('tween', {duration: 800, transition: 'quad:out'});

        div.addClass('hidden');
        div.setStyles({'visibility': 'hidden', 'opacity': 0});

        (function(){
            div.removeClass('hidden').fade(0, 1);
        }).delay(1000);
    }
});

window.addEvent('load', animate);