0

Web ページが最初に読み込まれると、開始 div が次の CSS コードを使用して回転します。

    @keyframes rotate
    {
    from {    transform:rotate(0deg);
    -ms-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); }

    to {    transform:rotate(360deg);
    -ms-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); }
    }

    @-webkit-keyframes rotate 
    {
    from {    transform:rotate(0deg);
    -ms-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); }

    to {    transform:rotate(360deg);
    -ms-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); }
    }

ローテーション後、このコードは役に立ちません。ボタンをクリックすると、この回転が再び行われるようにしたいと思います。javascript/jQueryこれを行うには、いつでも呼び出すことができるように、この css コードを関数に入れる必要があります。これは可能ですか？

4

3 に答える 3

2

これを試して

   $({deg: 0}).animate({deg: d}, {
            duration: 2000,
            step: function(now){
                elem.css({
                     transform: "rotate(" + now + "deg)"
                });
            }
        });

JSFIDDLE DEMOを見てください

于 2013-08-17T11:23:36.420 に答える
2

CSS プロパティと目的の値を jQuery に適用するだけで

デモ

$(' #box ').css({
    transition: '2s linear',
    transform: 'rotate(360deg)'
});

PS: jQuery は、これらすべてのブラウザー固有のプレフィックスを処理します。

于 2013-08-17T11:29:47.117 に答える
2

アニメーションの動作を次のようなクラスにラップできます。

.rotate{
  -webkit-animation: rotate 4s;
  /* more prefixes if you want to */
  animation: rotate 4s;
}

次に、次のようにボタンをクリックしてそのクラスを適用できます。

$('#myButton').click(function(){
  $('#myElementToAnimate').addClass('rotate');
});

アニメーションが終了したらクラスを削除するには、次のanimationendようなイベントをリッスンする必要があります。

$('#myButton').click(function(){
  // all the different event names are due to the fact that this isn't fully standardized yet
  $('#myElementToAnimate').addClass('rotate').on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function(){
    $(this).removeClass('rotate');
  });
});

これにより、JavaScript ベースのアニメーションを使用するよりもスムーズな結果が得られます。このデモ フィドルを参照してください

于 2013-08-17T11:30:50.037 に答える