5

まず、フィドル: http://jsfiddle.net/AATLz/

ここでの本質は、-webkit-transition-delay を使用してキューに入れられた一連のアニメーションがあることです。最初の要素は 0.4 秒、2 番目の要素は 0.8 秒、3 番目の要素は 1.4 秒などです。デフォルトでは最後から最初にキューに入れられ、親が「拡張」クラス (そのボタンで切り替え) を持っている場合は最初から最後にキューに入れられます。

これは、「.expanded」が追加されたときのアニメーションがボックスを 1 つずつ表示し、クラスが削除されると逆になることを意味します。

それはダンディです。クラスがアニメーションの途中で切り替えられると、問題が発生し始めます。たとえば、2 番目のボックスがアニメーション化された後にトグルすると、アニメーション化が開始されるまでに遅延が発生します。これは、いくつかの遅延タイマーが待機されているためです。

ここでの遅延は明らかに少し不格好です。

私が念頭に置いている2つの選択肢は、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 に答える