I'm having a particular problem where the rendering of some HTML is delayed by a CSS3 transform3d animation. This happens on all browsers I've tested (Android 4.1 webview, iOS 7, Chrome for Mac, Safari for Mac).
I have a <ul>
that acts as a container for my pages. Every li
represents a page. The overflow property is set to hidden, so you can only see one page at a time.
When I want to transition to a new page, I set tranform3d to the correct value, and along with transition-duration property, it slides the new page into the view. The funny thing is, the new page isn't rendered before the transition is finished (so it slides in a white page, when the animation is done, the view is displayed).
I can see that the html is inserted before the transition, so it seems to be delaying the rendering of the new <li>
element until after the transition is done.
I've also tried updateing the transform3d property 200ms after I insert the new <li>
element, when I do this, the view is rendered halfway through the animation.
If I remove the transition-duration property, there is of course no animation, but the <li>
element is rendered instantly.
Any way I can solve this? Has anyone experienced something similar?
Example code: http://jsfiddle.net/9RrAN/
Your problem is that you were also animating the width at the same time as -webkit-transform, so the last <li>
would wrap to the next line until the width reached its final value (which would happen as the transition ends). If I change the CSS to:
-webkit-transition: -webkit-transform 300ms;
-webkit-transition-timing-function: ease-in-out;
then it works properly. Here's an example: jsfiddle
(This is not related to React in any way.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.