0

可能重复：
如何使用 javascript 设置 CSS3 过渡？

我尝试通过元素的对象将 CSS3 转换 css 属性添加到具有（本机）JavaScriptstyle的元素，它在 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. 您正在尝试将样式设置为 nodeList，这是DOM QSA 方法返回的内容。您需要对其进行迭代。

对于跨浏览器解决方案，使用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 回答