使用 Mootools 链接 AddClass/RemoveClass 事件

Question

我目前正在制作一个 CSS 动画，实现这一目标的一部分涉及以特定的时间间隔更改主体的类名。

作为 mootools（和一般的 js）的新手，我想到实现这一点的最好方法是简单地以延迟的时间间隔向主体添加/删除类，如下所示：

(function() {$(document.body).addClass('load');}).delay(20);
(function() {$(document.body).addClass('load-two');}).delay(2000);
(function() {$(document.body).addClass('load-three');}).delay(2700);
(function() {$(document.body).addClass('load-four');}).delay(4500);

然而，我对这个主题了解得越多，我更确信这是实现我想要的目标的低效方法。

上面的代码适用于我测试过的所有浏览器，但是使用链类来实现我想要的效果会更好吗？我已经查看了有关设置链的 Mootools 文档，但无论出于何种原因，我都在努力让演示正常运行。

所以我要问的关键是，是否有更好的方法来编写上面发布的代码，以及使用不同方法的好处是什么？

谢谢。

Answer 1

在 mootools 中设置链非常简单。然而，使用 Chain 类作为 mixin 可能会涉及更多一些。

通常，它适合链接基于 Fx 的类和方法，而不是同步的类和方法。假设您有一个正在播放 link: chain 的补间效果，您可以 .chain(function() {}) 实例在之后执行其他操作。

callChain 示例 作为一个独立的例子是很好和简单的，但它在时间控制方面提供的很少。

然后是线性时间线方法。在您的情况下，您的第一个回调在 20 毫秒后运行，1980 毫秒后运行，第二个、第三个回调在第二个回调后 1680 毫秒运行，依此类推。如果您将事情串联起来，以便每个连续的步骤都调用下一个步骤，那么您需要考虑到这一点，并实际上传递两个操作之间等待的时间。

另一种方法是推迟它们，就像你从一开始就做的那样。

我在这里尝试简化前者： http://jsfiddle.net/dimitar/mpzzq/

(function(){
    Chain.implement({
        slowChain: function(duration){
            // console.log(duration);
            this.callChain.delay(duration === null ? 500 : duration, this);
        }
    });

    var db = $(document.body);
    var fixBody = function(cn, delay) {
        console.log(arguments);
        db.addClass(cn);
        console.log(cn, delay);
        if (this.$chain.length) {
            this.slowChain(delay || 0);
        }
    };

    var myChain = new Chain(),
        funcs = [{
            fn: fixBody,
            args: ["load"],
            delay: 1980
        }, {
            fn: fixBody,
            args: ["load-two"],
            delay: 700
        }, {
            fn: fixBody,
            args: ["load-three"],
            delay: 2000
        }, {
            fn: fixBody,
            args: ["load-four"],
            delay: 0
        }];

    myChain.chain(
        funcs.map(function(el) {
            el.args.push(el.delay);
            return el.fn.bind.apply(el.fn, [myChain].concat(el.args));
        })
    );

    document.getElement("button").addEvents({
        click: function() {
            myChain.slowChain(20);
        }
    });
})();

因此，在我的 funcs 对象数组中，我定义了 func 回调、要传递的参数和延迟。请记住，func 本身将 this 范围设置为链实例，并自行调用链上的下一个，但您可以轻松修改它并使用它。

希望它能给你一些想法。

这里是在 take 2 处，带有一个装饰器函数，该函数在延迟时调用链：

// function decorator.
Function.implement({
    chainDelay: function(delay, bind) {
        // allows you to set a delay for chained funcs and auto call stack (if bind is a chain instance)
        var self = this,                 
            args = (arguments.length > 2) ? Array.slice(arguments, 2) : null;
        return function() {
            setTimeout(function() {
                self.apply(bind, args.concat(Array.from(arguments)));
                if (bind && bind.$chain && bind.$chain.length)
                    bind.callChain.call(bind);
            }, delay);
        }
    },
    justChain: function(bind) {
        // runs a chained func when due and auto calls stack for next (if bind is a chain instance and avail)
        var self = this, args = (arguments.length > 1) ? Array.slice(arguments, 1) : null;
        return function() {
            self.call(bind, args);
            if (bind && bind.$chain && bind.$chain.length)
                bind.callChain.call(bind);
        }
    }
});


var moo = new Chain();

moo.chain(
    // some delayed ones.
    (function(what) {
        console.log(what);
    }).chainDelay(3000, moo, "hi"),
    (function(what, ever) {
        console.log(what, ever);
    }).chainDelay(3000, moo, "there", "coda"),
    (function(what) {
        new Element("div[id=foo][html=" + what +"]").inject(document.body);
    }).chainDelay(1000, moo, "mootools FTW!"),
    // regular ones here for good measure!    
    (function() {
        document.id("foo").setStyle("color", "red")
    }).justChain(moo),
    (function() {
        document.id("foo").setStyle("background-color", "blue")
    })    
);

moo.callChain();

示例： http: //jsfiddle.net/dimitar/Y4KCB/4/