1

これがフィドルです：http://jsfiddle.net/joplomacedo/mnj8n/

@-webkit-keyframes half-flip {
    0% { -webkit-transform: rotateX(0deg); }
    100% { -webkit-transform: rotateX(90deg); }
}

.half-flip-out {
    -webkit-animation: half-flip 1s;
    -webkit-transform: rotateX(90deg);
}

.half-flip-in {
    -webkit-animation: half-flip 1s reverse;
    -webkit-transform: rotateX(0deg);
}

クラスをjQueryで切り替えています。何らかの理由で、.half-flip-in は .half-lip-out とまったく同じことを行っています。理由がわかりません。

4

1 に答える 1

1

問題はありませんanimation-direction。後ほど詳しく説明しますので、とりあえず見てみましょう。

CSS3 キーフレーム アニメーション宣言は、代わりに次のようになります。

@-webkit-keyframes half-flip {
    0% {
        -webkit-transform: rotateX(0deg);
    }

    100% {
        -webkit-transform: rotateX(90deg);
    }
}

@-webkit-keyframes half-flip02 {
    0% {
        -webkit-transform: rotateX(90deg);
    }

    100% {
        -webkit-transform: rotateX(0deg);
    }
}

.half-flip-out {
    -webkit-animation: half-flip 1s;
}

.half-flip-in {
    -webkit-animation: half-flip02 1s;
}

上記でわかるように、2 つ@-webkit-keyframesの宣言があり、それぞれが正反対です。との両方からとを削除-webkit-transform: rotateX(0deg);したことにも注意してください。理由は簡単です。最初のフレームである 0% と最後のフレームである 100% で、キーフレーム アニメーションで既に定義されています。-webkit-transform: rotateX(90deg);.half-flip-out.half-flip-in

次に、jQuery をクリアする必要があります。DIV に追加または削除するクラスを決定するためにカウンターを使用する必要はありません。また、jQuery のコードが短いほど、実行が高速になります。常にコードを最適化してください。

jQuery は次のようになります。

var folding_img_wrap = $('.folding_img_wrap'),
    toggle_count = 0;

$('.toggle').on('click', function() {
    if (toggle_count % 2 === 0) {
        folding_img_wrap.addClass('half-flip-out').removeClass('half-flip-in');
    } else {
        folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
    }
    toggle_count++;
});

そして、これは私が推奨する方法です：

var folding_img_wrap = $('.folding_img_wrap'),

$(".toggle").toggle(function(){
    folding_img_wrap.addClass('half-flip-in').removeClass('half-flip-out');
},function(){
    folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
});

ここで私のソリューションを見ることができます。

それ以外の場合は、CSS3 宣言にプレフィックスを使用することも忘れない-moz-でください。これは、Chrome と Safari でのみ機能します。keyframesまた、IE9 または Opera ではサポートされていないことに注意してください。

于 2012-06-24T19:10:00.040 に答える