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에서 체인을 설정하는 것은 매우 간단합니다. 그러나 Chainin 클래스를 믹스 인으로 사용하는 것은 좀 더 복잡 할 수 있습니다.

일반적으로 Fx 기반 클래스 및 메서드의 체인에 맞춰졌으며 동기식이 아닙니다. 게임에서 link: chain의 트위닝 효과가 있다고 가정하면 .chain(function() {}) 인스턴스가 다른 것을 수행 할 수 있습니다.

the callChain example 독립 실행 형으로 충분하고 간단하지만 타이밍 제어 측면에서는 거의 제공되지 않습니다.

선형 타임 라인 방식이 있습니다. 귀하의 경우, 첫 번째 콜백은 20ms 후, 두 번째 이후에는 1980ms, 세 번째는 두 번째 이후에 1680ms 후에 실행됩니다. 각각의 연속 된 단계가 다음 단계를 호출하도록 사물을 연결하는 경우이를 고려하여 실제로 두 동작 사이의 대기 시간을 전달해야합니다.

다른 방법은 처음부터 완료 한 것처럼 지연시키는 것입니다.

나는 여기에 전 조금 간소화에 이동을했다 :

(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); 
     } 
    }); 
})(); 

http://jsfiddle.net/dimitar/mpzzq/ 그래서 객체 내 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/