animazioni CSS in coda con ritardo o fotogrammi chiave che possono essere interrotti senza problemi

Question

In primo luogo, un violino: http://jsfiddle.net/AATLz/

L'essenza è che c'è un set di animazioni in coda usando -webkit-transizione ritardo. Il primo elemento 0.4s, il secondo 0.8s, il terzo 1.4s, ecc. Sono in coda per ultimo per impostazione predefinita e il primo per ultimo quando il genitore ha la classe 'espansa' (attivata con quel pulsante).

Ciò significa che l'animazione quando viene aggiunto ".expanded" espelle le caselle una alla volta e al contrario quando la classe viene rimossa.

Questo è dandy. I problemi iniziano a sorgere quando la classe viene attivata a metà animazione. Se si attiva, per esempio, dopo che la seconda casella è stata animata, c'è un ritardo prima che inizi l'animazione, perché vengono attesi un paio di timer di ritardo.

I ritardi sono ovviamente un po 'goffi qui.

Le due alternative che ho in mente sono 1) animazioni CSS fotogrammi chiave, che io non sono del tutto sicuro di come attivare su più elementi in successione, e 2), JS controllata tempi - usando qualcosa come jQuery Transit. Non sono sicuro di quale sarebbe più capace/aggraziato o se mi manca un'altra opzione.

Qualsiasi input sarebbe fantastico!

Answer 1

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

cambiato un po '. Controlla i tempi con js. Animazioni 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(); 
})();