5

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

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

这意味着添加 '.expanded' 时的动画将框一个一个地拉出，而当类被删除时则相反。

那是花花公子。当类在动画中间切换时，问题就开始出现了。如果你切换，比如说，在第二个盒子动画之后，在它们开始动画之前会有一个延迟，因为有几个延迟计时器正在等待。

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

我想到的两种选择是 1）CSS 关键帧动画，我不完全确定如何连续激活多个元素，以及 2）JS 控制时间- 使用类似jQuery Transit的东西。我不确定哪个更有能力/更优雅，或者我是否缺少另一个选择。

任何输入都会很棒！

4

1 回答 1

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();
})();
于 2013-07-01T18:19:44.940 回答