kolejce animacje CSS z wykorzystaniem opóźnienia lub klatek kluczowych, które mogą być przerwane sprawnie

Question

pierwszy, skrzypce: http://jsfiddle.net/AATLz/

Istotą jest to, że istnieje zestaw animacji w kolejce za pomocą -webkit-przejściowych opóźnień. Pierwszy element 0.4s, drugi 0.8s, trzeci 1.4s, itd. Są domyślnie ustawiane w kolejce jako pierwsze i pierwsze, gdy rodzic ma klasę "rozwiniętą" (włączoną tym przyciskiem).

Oznacza to, że animacja po dodaniu wyrażenia ".expanded" powoduje usunięcie pól jeden po drugim i odwrotnie, gdy klasa zostanie usunięta.

To jest dandy. Problemy zaczynają się pojawiać, gdy klasa jest przełączana w połowie animacji. Jeśli przełączysz, powiedzmy, po tym, jak drugie pole zostanie animowane, pojawi się opóźnienie, zanim zaczną animować się z powrotem, ponieważ czekają na ciebie dwa opóźnione zegary.

Opóźnienia są oczywiście nieco niezgrabne.

Obie alternatywy mam na myśli to: 1) animacje CSS klatek kluczowych, których nie jestem do końca pewien, w jaki sposób włączyć na wielu elementów z rzędu, i 2), JS kontrolowane rozrządu - używając coś podobnego jQuery Transit. Nie jestem pewien, który byłby bardziej sprawny/pełen wdzięku lub jeśli brakuje mi innej opcji.

Wszelkie dane wejściowe będą niesamowite!

Answer 1

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

Zmieniono go trochę. Kontroluj czas za pomocą js. Animacje z 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(); 
})();