0

重複の可能性:
javascript を使用して CSS3 トランジションを設定するには?

要素のオブジェクトによって (ネイティブ) JavaScript を持つ要素に CSS3 トランジション css プロパティを追加しようとしましたstyleが、Firefox では機能しませんが、webkitブラウザーではすべて問題ありません。私のコード:

var actor_object = document.querySelectorAll("p");
actor_object.style["-moz-transition-property"] = "all"

でそれができると答えないでMozTransitionPropertyください-moz-。

4

1 に答える 1

1
  1. 安定版の Firefox リリースは、W3C 標準の接頭辞なしのtransition-propertyCSS プロパティを利用しています。
  2. JS スタイルで適用するには、CSS プロパティをキャメルケースにする必要があります。
  3. DOM QSA メソッドが返すスタイルを nodeList に設定しようとしています。それを繰り返す必要があります。

クロスブラウザー ソリューションの場合、jQueryを使用すると、次のように簡単になります。

$('p').css({transitionProperty: "all", transitionDuration: '2s'});​

フィドルを見る

純粋な JS ソリューションが必要な場合は、サポートされている CSS プロパティをテストするためのコードを次に示します$.cssHooks。

function styleSupport(prop) {
    var vendorProp, supportedProp,

        // capitalize first character of the prop to test vendor prefix
        capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
        prefixes = ["Moz", "Webkit", "O", "ms"],
        div = document.createElement("div");

    if (prop in div.style) {

        // browser supports standard CSS property name
        supportedProp = prop;
    } else {

        // otherwise test support for vendor-prefixed property names
        for (var i = 0; i < prefixes.length; i++) {
            vendorProp = prefixes[i] + capProp;
            if (vendorProp in div.style) {
                supportedProp = vendorProp;
                break;
            }
        }
    }

    // avoid memory leak in IE
    div = null;

    // add property to $.support so it can be accessed elsewhere
    //$.support[prop] = supportedProp;

    return supportedProp;
}

次に、そのまま使用します。

(function() {
    var transitionProperty = styleSupport("transitionProperty");
    var transitionDuration = styleSupport("transitionDuration");

    var actor_object = document.querySelectorAll("p");
    for (var i = 0, l = actor_object.length; i < l; i++) {
        actor_object[i].style[transitionProperty] = "all";
        actor_object[i].style[transitionDuration] = "2s";
    }
}());

フィドル

于 2012-11-07T21:40:30.500 に答える