1

私は現在煎茶と一緒にプロジェクトに取り組んでいます。このプロジェクトでは、回転する「wheeloffortune」ホイールがあり、ホイールの特定の部分に回転してボーナスを獲得します。

私は以前、divのcssクラスを切り替えるための間隔を作成したJavaScriptを使用してこれを行いましたが、それはうまく機能しませんでした。

私は今、私が次のcssを持っているcss3アニメーションでそれをやりたいです：

    @-webkit-keyframes rotater {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(3600deg);
    }
}

.css3-rotaterFull {
    -webkit-animation-name: rotater;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function:ease-out;
    -webkit-animation-duration: 15s;
}

しかし、私はそれを可変である特定の角度に回転させる必要があります。そのため、私は設定できる必要があります

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

クラスをdivに追加する前に、可変の度数に分割します

これを行う方法について何かアイデアはありますか？

4

2 に答える 2

0

CSSOMを使用します：http：//dev.w3.org/csswg/cssom/

function rotate(deg) {
    var elem = document.getElementById('wheel');
    var lastStyleSheet = document.styleSheets[document.styleSheets.length - 1];
    var rule = '@-webkit-keyframes menuBreadcrumbAnimation {\
            0%  {\
                -webkit-transform: rotate(0deg);\
            } 100% {\
                -webkit-transform: rotate(' + deg + 'deg);\
            }';

    function rotateAnimationEnd() {
        lastStyleSheet.removeRule(lastStyleSheet.length);
        elem.removeEventListener('webkitAnimationEnd', rotateAnimationEnd,  false);
    };

    lastStyleSheet.insertRule(rule, lastStyleSheet.rules.length);
    elem.addEventListener('webkitAnimationEnd', rotateAnimationEnd, false);
    elem.classList.add('css3-rotaterFull');
};

終了度がわかったら、それをこの関数に渡します。ドキュメントの最後のスタイルシートを取得し、動的度数がプラグインされたルールを作成してから、ルールをスタイルシートに挿入し、アニメーションを使用するように適切なクラスを要素に追加します。

webkitAnimationEndリスナーは、アニメーションが終了したらスタイルシートからルールを削除するためにあり、ルールが継続的に構築されないようにします。また、webkitAnimationEndリスナー自体を削除して、次のスピンに干渉しないようにします。

于 2012-11-23T18:55:28.693 に答える
0

で取得/設定できるように、スタイルタグに入れてくださいgetElementById('').innerHTML;。

于 2015-09-20T03:26:53.560 に答える