पंक्तिबद्ध सीएसएस देरी या मुख्य-फ़्रेम का उपयोग कर एनिमेशन कि बाधित किया जा सकता है आसानी से

Question

सबसे पहले, एक बेला: http://jsfiddle.net/AATLz/

सार यहाँ यह है कि एनिमेशन का एक सेट -webkit-संक्रमण-देरी का उपयोग कर पंक्तिबद्ध है। प्रथम तत्व 0.4s, दूसरा 0.8s, तीसरा 1.4s, आदि। वे डिफ़ॉल्ट रूप से डिफ़ॉल्ट रूप से पहले पंक्तिबद्ध होते हैं, और सबसे पहले जब माता-पिता के पास 'विस्तारित' श्रेणी होती है (उस बटन के साथ टॉगल किया जाता है)।

इसका मतलब है कि 'एक्सपेन्डेड' जोड़ा गया एनीमेशन बॉक्स को एक-एक करके बाहर लाता है, और जब वर्ग हटा दिया जाता है तो विपरीत में।

यह बेवकूफ है। जब कक्षा मध्य-एनीमेशन टॉगल की जाती है तो समस्याएं उत्पन्न होती हैं। यदि आप टॉगल करते हैं, तो कहें, दूसरे बॉक्स एनिमेटेड होने के बाद, एनिमेटिंग शुरू करने से पहले देरी हो रही है, क्योंकि कुछ देरी टाइमर का इंतजार किया जा रहा है।

देरी स्पष्ट रूप से थोड़ा सा घबराहट है।

दो विकल्प मेरे मन में है 1) सीएसएस-फ़्रेम एनिमेशन, जो मैं कैसे उत्तराधिकार में कई तत्वों पर सक्रिय करने के लिए पूरी तरह से यकीन नहीं है, और 2), जे एस नियंत्रित समय - की तरह कुछ का उपयोग कर jQuery Transit। मुझे यकीन नहीं है कि कौन सा सक्षम/सुंदर होगा या यदि मुझे कोई दूसरा विकल्प याद आ रहा है।

कोई इनपुट अद्भुत होगा!

Answer 1

jsfiddle: http://jsfiddle.net/Bushwazi/fZwTT/

इसे थोड़ा बदल दिया है। जेएस के साथ समय पर नियंत्रण। सीएसएस के साथ एनिमेशन।

सीएसएस:

* { 
    margin:0; 
    padding:0; 
} 
#container { 
     background: orange; 
     height: 100px; 
     position: relative; 
     width: 100px; 
} 
.box { 
     height: 100px; 
     left: 0; 
     position: absolute; 
     top: 0; 
     width: 100px; 
     -webkit-transition:all 0.5s ease-in-out 0s; 
     -moz-transition:all 0.5s ease-in-out 0s; 
     -o-transition:all 0.5s ease-in-out 0s; 
     transition:all 0.5s ease-in-out 0s; 
     -webkit-transform: translate3d(0,0,0); 
}   
.box-1 { 
     background: red; 
} 
.box-2 { 
     background: green; 
} 
.box-3 { 
     background: yellow; 
} 
.box-4 { 
     background: blue; 
} 
.box-1 .box-1 { 
    left:100px; 
} 
.box-2 .box-2 { 
    left:200px; 
} 
.box-3 .box-3 { 
    left:300px; 
} 
.box-4 .box-4 { 
    left:400px; 
} 

HTML:

<div id="container" class="box-0" data-status="default" data-box="0"> 
    <div class="box box-1"></div> 
    <div class="box box-2"></div> 
    <div class="box box-3"></div> 
    <div class="box box-4"></div> 
</div> 

<button id="ToggleAnim">Toggle</button> 

जे एस:

(function(){ 
    var testies = { 
     to: 0, 
     init: function(){ 
      $button = $('#ToggleAnim'); 
      $anim_elm = $('#container'); 
      $(function(){ 
       testies.el(); 
      }); 
     }, 
     el: function(){ // el ==> event listeners 
      $button.on('click', testies.toggleBoxes); 
     }, 
     toggleBoxes: function(evt){ 
      var status = $anim_elm.attr('data-status'), 
        pos = $anim_elm.attr('data-box'); 
      window.clearTimeout(testies.to); 
      // if default ==> build 
      // if killing ==> build 
      // if building ==> kill 
      // if done ==> kill 
      if(status == 'build' || status == 'done'){ 
        testies.kill(); 
      } else { 
        testies.build(); 
      } 
      evt.preventDefault(); 
     }, 
     build: function(){ 
      bpos = $anim_elm.attr('data-box'); 
      if(bpos < 4){ 
       bpos++; 
       $anim_elm.attr('data-status', "build").attr('data-box', bpos).addClass('box-' + bpos); 
       testies.to = window.setTimeout(testies.build, 500); 
      } 
      if(bpos == 4)$anim_elm.attr('data-status', "done"); 
      console.log('BUILD: ' + bpos); 
     }, 
     kill: function(){ 
      kpos = $anim_elm.attr('data-box'); 
      if(kpos > 0){ 
       db = kpos - 1; 
       $anim_elm.attr('data-status', "kill").attr('data-box', db).removeClass('box-' + kpos); 
       testies.to = window.setTimeout(testies.kill, 500); 
      } 
      console.log('KILL: ' + kpos); 
      if(kpos == 0)$anim_elm.attr('data-status', "default") 
     } 
    } 
    testies.init(); 
})();