Question

可能重复：
How to set CSS3 transition using javascript?

我尝试将CSS3过渡css属性添加到元素的style对象的（本机）JavaScript元素，它在Firefox中不起作用，但在webkit浏览器中一切正常。我的代码：

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

请不要回答我可以使用MozTransitionProperty执行此操作，我知道这一点，但我需要使用-moz-。

Answer 1

稳定的Firefox版本使用W3C标准的非前缀transition-property CSS属性;
您必须以JS样式来应用camelCase CSS属性;
您正在尝试将样式设置为nodeList，这是DOM QSA method返回的内容。你需要迭代它。

对于跨浏览器的解决方案，使用jQuery它就像：

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

See fiddle

如果你想要一个纯JS解决方案，这里是用于测试$.cssHooks支持的CSS属性的代码：

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

为什么Firefox不接受-moz-transition的风格？

1 个答案: