0

私は現在、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 ドキュメントを調べましたが、何らかの理由で、デモを機能させるのに苦労しています。

だから私が求めていることの核心は、上記のコードを書くためのより良い方法があるかどうか、そして別の方法を使用する利点は何ですか?

ありがとう。

4

1 に答える 1

2

mootoolsでチェーンを設定するのはとても簡単です。ただし、Chainクラスをミックスインとして使用することは、もう少し複雑になる可能性があります。

通常、同期的なものではなく、Fxベースのクラスとメソッドのチェーンを対象としています。トゥイーン効果が機能しているとすると、インスタンスは後で何か他のことを行うことlink: chainができます。.chain(function() {})

スタンドアロンとしてのcallChainの例は問題なく簡単ですが、タイミング制御に関してはほとんど提供されていません。

次に、線形タイムラインアプローチがあります。あなたの場合、最初のコールバックは20ミリ秒後に実行され、その後1980ミリ秒後に実行され、2番目のコールバックは2番目の後に1680ミリ秒実行され、以下同様に続きます。連続する各ステップが次のステップを呼び出すように物事を連鎖させる場合は、それを考慮に入れて、代わりに2つのアクション間で待機する時間を実際に渡す必要があります。

もう1つの方法は、最初から行ったように、それらを延期することです。

私はここで前者を少し合理化することに挑戦しました：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スコープはチェーンインスタンスに設定されており、チェーン上の次のインスタンスを自己呼び出ししますが、これを簡単に変更して操作できることに注意してください。

それがあなたにいくつかのアイデアを与えることを願っています。

ここでは、遅延時にチェーンを呼び出すデコレータ関数を使用してテイク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/

于 2011-07-29T12:04:24.287 に答える