鏈接添加類/ RemoveClass與Mootools事件

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() {})這個實例之後做點別的事情。

the callChain example作爲一個獨立單位是很好，很容易，但它提供了很少的時間控制。

然後是線性時間軸方法。在你的情況下，你的第一個回調在20ms之後運行，1980ms之後第二個，第三個運行在第二個回合之後1680ms等等。如果你把事情鏈接起來，以便每一個連續的步驟都會調用下一個步驟，那麼你需要考慮這一點，並且實際上將時間傳遞給兩個操作之間的等待時間。

另一種方式是按照從一開始就完成的方式推遲它們。

我在這裏精簡前一點了個去：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/