使用延迟或可以平滑中断的关键帧的排队CSS动画

Question

首先，小提琴：http://jsfiddle.net/AATLz/

这里的本质是有一组使用-webkit转换延迟排队的动画。第一个元素0.4s，第二个元素0.8s，第三个元素1.4s，等等。默认情况下，它们排在倒数第一的队列中，当父元素具有"扩展"类时（用该按钮切换），则排在倒数第二的队列中。

这意味着，添加".expanded"时的动画会将框一个接一个地带出，而删除类时则相反。

太棒了。当类在动画中间切换时，问题开始出现。如果切换，比如说，在第二个长方体设置动画之后，在它们开始设置动画之前会有一段延迟，因为有几个延迟计时器正在等待。

这里的延误显然有点笨拙。

我想到的两种选择是：1）CSS关键帧动画，我不完全确定如何在多个元素上连续激活；2）JS控制时序——使用类似jQuery Transit的东西。我不确定哪一个更干练/优雅，或者我是否错过了另一个选择。

任何输入都会很棒！

Answer 1

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

把它改了一点。用js控制计时。带有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();
})();