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

after webkit transition "hide"(display:none) div

after webkit transition "hide"(display:none) div

Problem

I have something like this:

 
   

The problem is when first div finishes with animation I want to hide him and the div which is below(yellow one) to take his place. I tried to put property display:none but animation wont work.

Any help is highly appreciate.

Problem courtesy of: Zemzela

Solution

Since your code is already webkit specific, maybe you can use the webkitTransitionEnd event to know when the animation ends. In the handler for that event you can hide the first div and display the second. I have written a quick jsFiddle to demonstrate this.

Solution courtesy of: Jeroen

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

after webkit transition "hide"(display:none) div

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×