en cola animaciones CSS utilizando retraso o fotogramas clave que puede ser interrumpida sin problemas

Question

En primer lugar, un violín: http://jsfiddle.net/AATLz/

La esencia aquí es que hay una serie de animaciones en cola usando webkit-transición-retardo. Primer elemento 0.4s, segundos 0.8s, terceros 1.4s, etc. Se colocan en la cola del último al primero de manera predeterminada, y del primero al último cuando el padre tiene la clase 'ampliada' (alternada con ese botón).

Esto significa que la animación cuando se agrega '.expanded' trae las cajas una a una, y en reversa cuando se elimina la clase.

Eso es elegante. Los problemas comienzan a surgir cuando la clase se alterna a mitad de la animación. Si alternas, por ejemplo, después de que la segunda casilla se haya animado, hay un retraso antes de que comiencen a animarse, porque se esperan unos temporizadores de retardo.

Los retrasos son obviamente un poco torpes aquí.

Las dos alternativas que tengo en mente son: 1) animaciones CSS fotogramas clave, que no estoy del todo seguro de cómo activar en varios elementos de la sucesión, y 2), JS controlado momento - usar algo como jQuery Transit. No estoy seguro de cuál sería más capaz/agraciado o si me falta otra opción.

¡Cualquier entrada sería increíble!

Answer 1

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

lo cambió un poco. Controla el tiempo con js. Animaciones con 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(); 
})();