Anstehende CSS-Animationen mit Verzögerung oder Keyframes, die glatt

Question

Erste unterbrochen sein kann, eine Geige: http://jsfiddle.net/AATLz/

Das Wesentliche dabei ist, dass es eine Reihe von Animationen Warteschlange -webkit-Übergang-Verzögerung verwendet wird. Erstes Element 0.4s, zweites 0.8s, drittes 1.4s, usw. Sie sind standardmäßig in der letzten bis in die erste Warteschlange eingereiht und dauern als letzte, wenn die übergeordnete Klasse die Klasse 'expanded' hat (mit dieser Schaltfläche umschaltbar).

Dies bedeutet, dass die Animation, wenn '.expanded' hinzugefügt wird, die Boxen nacheinander ausgibt, und umgekehrt, wenn die Klasse entfernt wird.

Das ist Dandy. Die Probleme beginnen zu entstehen, wenn die Klasse mitten in der Animation umgeschaltet wird. Wenn Sie zum Beispiel nach dem Animieren der zweiten Box umschalten, gibt es eine Verzögerung, bevor sie mit der Animation beginnen, da einige Verzögerungszeiten abgewartet werden.

Verzögerungen sind offensichtlich ein bisschen klobig hier.

Die beiden Alternativen, die ich im Sinn haben, sind 1) CSS Keyframe-Animationen, die ich bin mir nicht ganz sicher, wie auf mehrere Elemente nacheinander zu aktivieren, und 2), JS gesteuerten Zeitpunkt - mit so etwas wie jQuery Transit. Ich bin mir nicht sicher, welches besser/eleganter wäre oder ob ich eine andere Option verpasse.

Jeder Eingang wäre super!

Answer 1

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

Changed es ein wenig. Kontrolliere das Timing mit js. Animationen mit CSS.

CSS:

* { 
    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> 

JS:

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