javascript - 为什么 Firefox 不接受 -moz-transition 样式？

Question

<分区>

Answer 1

1. 稳定的 Firefox 版本使用 W3C 标准的非前缀 transition-property CSS 属性；
2. 您必须使用驼峰式 CSS 属性才能在 JS 样式中应用；
3. 您正在尝试为 nodeList 设置样式，这就是 DOM QSA method 的内容返回。您需要对其进行迭代。

对于跨浏览器解决方案，使用 jQuery就这么简单:

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

See fiddle

如果您想要一个纯 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";
    }
}());

Fiddle