68

div を回転させて特定の位置で停止する必要があります (値はサーバーから受信されます)。

ネイティブ JS を回転させて停止しようとしましたが、CPU を大量に消費しています。

CSS アニメーションで回転できますが、アニメーションを停止する場所を動的に記述するクラスを作成する必要があります。何かのようなもの

@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}

ここに1つの参照があります

http://jsfiddle.net/bVkwH/8/

前もって感謝します

4

13 に答える 13

46

ハードコーディングする必要があるため、動的に作成するのは簡単ではないと思います。@keyframes

トランジションは、JavaScript によって実行される CSS の変更に適切に応答できるため、操作が少し簡単です。

ただし、CSS トランジションがもたらす複雑さはかなり限られています。複数のステップを含むアニメーションを実現するのは困難です。

これは、CSS @keyframe アニメーションが解決することを意図した問題ですが、トランジションが行う動的な応答性のレベルを提供しません。

しかし、これらのリンクはあなたを助けるかもしれません

Link1 : @-webkit-keyframe アニメーションを多数の小さなステップで生成するツール。これにより、イージング式の無制限の選択への扉が開かれます。

Link2アニメーションを作成するための UI を提供し、CSS コードにエクスポートするため、ベースとして使用すると大きな助けになります。

この ソリューションは間違いなくあなたに役立つと思います。動的キーフレームに使用されます

于 2013-08-28T07:26:01.323 に答える
11

Alex Grande の答えは、いくつかのキーフレームでうまく機能します。しかし、キーフレームを何度も動的に追加し続けたい場合、Web ページは非常に速く遅延します。この問題を解決するには、新しい DOM 要素の作成をやめてください。むしろ、1 つの新しい DOM スタイルシートを作成し、insertRule. さらに多くのキーフレームが必要な場合 (アニメーション フレームごとに新しいキーフレームを生成する場合など)、使用されなくなった古いキーフレームを削除するシステムをセットアップする必要があります。これは、このようなことを達成するための良いスタートです。

var myReuseableStylesheet = document.createElement('style'),
    addKeyFrames = null;
document.head.appendChild( myReuseableStylesheet );
if (CSS && CSS.supports && CSS.supports('animation: name')){
    // we can safely assume that the browser supports unprefixed version.
    addKeyFrames = function(name, frames){
        var pos = myReuseableStylesheet.length;
        myReuseableStylesheet.insertRule(
            "@keyframes " + name + "{" + frames + "}", pos);
    }
} else {
    addKeyFrames = function(name, frames){
        // Ugly and terrible, but users with this terrible of a browser
        // *cough* IE *cough* don't deserve a fast site
        var str = name + "{" + frames + "}",
            pos = myReuseableStylesheet.length;
        myReuseableStylesheet.insertRule("@-webkit-keyframes " + str, pos);
        myReuseableStylesheet.insertRule("@keyframes " + str, pos+1);
    }
}

使用例:

addKeyFrames(
    'fadeAnimation',
    '0%{opacity:0}' + 
    '100%{opacity:1}'
);

また、Alex Grande さん、 IE8 以降は不要であり、IE10 まではサポートされていないdocument.getElementsByTagName('head')[0]と確信しています。ただ言って...type = 'text/css'@keyframes

于 2017-05-10T23:23:44.953 に答える