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

HTML5 -webkit-transition doesn't work if I set it right before setting something else using javascript on chrome

HTML5 -webkit-transition doesn't work if I set it right before setting something else using javascript on chrome

Problem

I'm still new to HTML5 but I faced a very strange behavior. (In Chrome)

The following code works on chrome:





    Webkit-transition test
This is an old span

However if I move the line:

document.getElementById("t47").className += "letter";

to the beginning of the moveIt function, the span just jumps without transitioning

The javascript part would be like this:

So What is the difference here? These two cases work well on firefox though. I haven't tried IE.

I appreciate any help I can get!

Problem courtesy of: Tareq

Solution

From the CSS Transitions specification:

... changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others.

In your alternative version, you change the className and update the transform without allowing the browser to calculate the consequences of the change to the className. (This typically happens when you return control to the event loop.) Therefore, the browser may still be operating from the old value of the transition property (which is the default value of all 0s ease 0s). If that occurs, then the property change takes place immediately with no animation since the delay and duration are 0s.

Solution courtesy of: Raymond Chen

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

HTML5 -webkit-transition doesn't work if I set it right before setting something else using javascript on chrome

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×