1

CSS3を使用してこれを行う方法を誰かに教えてもらえますか？

http://jsfiddle.net/dYYZP/65/

私は、イベントを介してCSS3トランジションを呼び出し、jQueryのようなトランジションを停止する方法をstop(true, false)何ヶ月も理解しようとしてきました。

<div id="outer"></div>
<div id="inner"></div>


var under = true;
$("#outer").bind({
    click : function() {
        if(under){
            $("#inner").stop(true, false).animate( {
                left: 50
            }, 500);
        }
        else{
            $("#inner").stop(true, false).animate( {
                left: -50
            }, 500);    
        }
        under = !under;
    }
});
4

2 に答える 2

3

http://jsfiddle.net/dYYZP/81-webkit （便宜上含めただけであることに注意してください）。

CSS 2D変換translateを使用して、X/Y軸に沿って要素を移動できます。これは、CSS3トランジションの組み合わせで、同様のアニメーションを可能にします。

これを純粋にCSSで実行したい場合は<label>、チェックボックス要素の赤いボックスを作成してから、そのようなセレクター:checked + .slideoutに変換ルールを含める必要があります。

アニメーション中にCSSトランジションを停止する方法はありません。アニメーションが完了したときのみ（ルールを削除することにより）。

于 2013-01-14T03:20:43.670 に答える
1

これはあなたがやりたいことですか？

私はあなた#innerのcssに以下のコードを追加しました：

transition:left .5s;
-moz-transition:left .5s;
-webkit-transition:left .5s;

それが役に立てば幸い。

于 2013-01-14T03:19:44.633 に答える