MootoolsでAddClass/RemoveClassイベントを連結する

Question

私は現在、CSSのアニメーションを作成しています。これを達成するには、特定の間隔でボディのクラス名を変更する必要があります。

（一般的には及びJS）MooToolsは、私は、これは単純にそうように、遅れた時間間隔で体にクラスを追加/削除することであった図る考えた最良の方法とは全く新しいビーイング：

(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でチェーンを設定するのは簡単です。しかし、MixinとしてChainクラスを使用することはもう少し複雑になる可能性があります。

通常、Fxベースのクラスとメソッドの連鎖に向いていますが、同期しているものではありません。演奏中にlink: chainのトゥイーンエフェクトがあるとしたら、.chain(function() {})の後に何か別のことをすることができます。

the callChain exampleスタンドアロンとしては十分に簡単で十分ですが、タイミング制御の点ではほとんどありません。

リニアタイムラインアプローチがあります。あなたの場合、最初のコールバックは20 ms、1980 ms後に実行され、2回目、3回目は1680 ms後に実行されます。連続する各ステップが次のステップを呼び出すように連鎖する場合は、そのことを考慮に入れて、実際には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スコープがチェーンインスタンスに設定されており、チェーンの次のセルフコールが呼び出されますが、これを簡単に修正して使用することができます。

願っています。その

// 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/