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

Question

首先，一个 fiddle :http://jsfiddle.net/AATLz/

这里的本质是有一组使用 -webkit-transition-delay 排队的动画。第一个元素 0.4 秒，第二个 0.8 秒，第三个 1.4 秒，等等。默认情况下，它们从最后到第一个排队，当父级具有“扩展”类(使用该按钮切换)时从第一个到最后一个。

这意味着添加“.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();
})();