Mootools 1.3.1:链式动画和同步动画2个元素

Mootools 1.3.1: chain animations and animate 2 elements synchronisly

本文关键字：动画同步元素 2个 Mootools 更新时间：2023-09-26

我想同时给div#w_xxx和div#w_xxx img添加动画。

它们应该变大，之后它们应该恢复到原来的宽度和高度。

问题是，mootools同时播放所有动画，所以我看不到动画，我尝试了一些.chain功能从mootools，但我没有得到它的工作。

我的代码是这样的:

$("w_"+current_item+"").set('morph', {
            duration: 1000,
            transition: Fx.Transitions.Bounce.easeOut
        });
        $("w_"+current_item+"").morph({
                    'opacity': '1',
                    'width': 366,
                    'height': 240,
                    'z-index': '100'
        });
        $$("div#w_"+current_item+" img").set('morph', {
            duration: 1000,
            transition: Fx.Transitions.Bounce.easeOut
        });
        $$("div#w_"+current_item+" img").morph({
                    'opacity': '1',
                    'width': 366,
                    'height': 240,
                    'z-index': '100'
        });
        $("w_"+current_item+"").set('morph', {
            duration: 1000,
            transition: Fx.Transitions.Bounce.easeOut
        });
        $("w_"+current_item+"").morph({
                    'opacity': '1',
                    'width': 183,
                    'height': 120,
                    'z-index': '100'
        });
        $$("div#w_"+current_item+" img").set('morph', {
            duration: 1000,
            transition: Fx.Transitions.Bounce.easeOut
        });
        $$("div#w_"+current_item+" img").morph({
                    'opacity': '1',
                    'width': 183,
                    'height': 120,
                    'z-index': '100'
        });

您应该查看MooTools-more: http://mootools.net/docs/more/Fx/Fx.Elements中的Fx.Elements，它被设计为在统一的计时器上运行多个动画。

http://jsfiddle.net/dimitar/tC4V4/

// mock your current_item... 
var current_item = 1;
var w = document.id("w_" + current_item);
new Fx.Elements($$(w, w.getElement("img")), {
    onComplete: function() {
        console.log("done");
    },
    duration: 4000,
    transition: Fx.Transitions.Bounce.easeOut,
    link: "chain"
}).start({
    0: {
        'opacity': '1',
        'width': 366,
        'height': 240,
        'z-index': '100'
    },
    1: {
        'opacity': '1',
        'width': 183,
        'height': 120,
        'z-index': '100'
    }   
}).start({
    0: {
        opacity: 0
    }  
});

同样，它支持link: chain，所以你可以链接东西或等待等。