Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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-.

Problem courtesy of: Afshin Mehrabani

Solution

  1. The stable Firefox release utilizes the W3C-standard non-prefixed transition-property CSS property;
  2. You have to camelCase CSS properties to apply in JS style;
  3. 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 

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 

Fiddle

Solution courtesy of: Fabrício Matté

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×