0

javascript で webkit アニメーションを生成できるかどうか疑問に思っていました。基本的に必要なのは、要素Aをクリックすると、要素Bが毎回ランダムなパラメーターでアニメーション化されることだけです(これが、事前に固定されたCSSを使用できない理由です)。私は実際にこれらすべてを JavaScript で生成できるかどうかをテストしていますが、かなりうまくいきました。私のコードはまだランダムなことをしていませんが、javasript で正しく動作するようになると、ランダムにするのは本当に簡単です。したがって、今は要素 A をクリックするたびに要素 B をアニメーション化したいと考えています。私のコードは次のようになります。

$("#elementA").live('touchstart mousedown',function() {

$("head style").remove();
var cssAnimation  = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('@-webkit-keyframes random_spin {'+
'from   { -webkit-transform: rotate(0deg);      }'+
'to     { -webkit-transform: rotate(1440deg);   }'+
'}');

cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);

$("#elementB").removeClass("random_spin");
$("#elementB").css({'-webkit-animation-name': ''});

$("#elementB").css({'-webkit-animation-name': 'random_spin'});
$("#elementB").addClass("random_spin");
});

そこで、ヘッダーにアニメーションを追加し、それを elementB に適用しました。

私の「random_spin」クラスは、既に定義済みの CSS です。

.random_spin {
    -webkit-animation-duration:         5s;  
    -webkit-animation-timing-function:  ease;
}

私の意図は、elementA をクリックするたびに elementB を回転させることができるようにすることです。残念ながら、一度しか実行されず、何度クリックしても、アニメーション名を何度リセットしても、一度しか実行されません。私は何を間違っていますか？

4

1 に答える 1

1

CSS3 アニメーションを再開するには、コマンド間にわずかな遅延を入れずにクラスを削除して追加することはできません。これにより、ブラウザーは、新しいクラスを追加する前に実際にクラスを削除する時間を確保できます。シンプルな setTimeout でこれを行うことができます 

setTimeout(function(){
    $("#elementB").addClass("random_spin");
}, 100);

詳細と例については、以下を参照してください。

http://css-tricks.com/restart-css-animation/

于 2012-10-16T18:44:39.180 に答える