Why Firefox doesn't accept -moz-transition in style?

Question

Possible Duplicate:
How to set CSS3 transition using javascript?

I try to add an CSS3 transition css property to an element with (native) JavaScript by style object of the element, it doesn't work in Firefox but everything is fine in webkit browsers. My code:

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

Please don't answer that I can do that with MozTransitionProperty, I know this but I need to do with -moz-.

Have you tried `actor_object.style["transition-property"] = "all"`? — Kevin Boucher, Nov 07 '12 at 21:18
@RenePot Actually I want to build an cross-browser css3 animation. I know that I have the same syntax in `Opera` also, I mean `-o-` and using a common syntax between browsers help me to reduce my code. So, in `Opera` is there any property for that? For example `OTransitionProperty`? — Afshin Mehrabani, Nov 07 '12 at 21:24
Because per spec this is not supposed to work. You can do `actor_object.style.setProperty("-moz-transition-property", "all")`, though. — Boris Zbarsky, Nov 08 '12 at 07:56
@BorisZbarsky I didn't see `setProperty` before, if there's something like that it should work for me. Thanks. — Afshin Mehrabani, Nov 08 '12 at 08:38

score 1 · Accepted Answer · answered Nov 07 '12 at 21:40

The stable Firefox release utilizes the W3C-standard non-prefixed transition-property CSS property;
You have to camelCase CSS properties to apply in JS style;
You're trying to set a style to a nodeList, which is what the DOM QSA method returns. You need to iterate over it.

For a cross-browser solution, using jQuery it'd be as simple as:

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

See fiddle

If you want a pure JS solution, here's the code for testing supported CSS properties from $.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;
}

Then just use it as such:

(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

Why Firefox doesn't accept -moz-transition in style?

1 Answers1