Javascript / CSS3过渡问题

Question

I've got a page with ajax links between pages, and I'm having some problems with the transition. I set up a demo page on jsfiddle to demonstrate.

http://jsfiddle.net/UVr4A/

The problem is, when the content changes height, the div will end up in the wrong position and cause a non-smooth transition. I tried a couple things to try and fix this. My current solution is to remove the animate property from the div and then move it, but this doesn't always work. In my code I commented the delay to demonstrate the issue. Even with a 50ms delay it doesn't ways work properly (I think it's due to browser lag since it barely ever happens on this jsfiddle), so I'm looking for more elegant solution that doesn't cause the transition to take any longer.

I'm using css3 transitions rather than jquery because they tend to be much smoother.

Answer 1

I think the issue was the css transition. Check this out:

http://jsfiddle.net/UVr4A/2/

Answer 2

Well, it turns out the problem had nothing to do with what I thought it was. Part of it was that I over-simplified my question and ended up removing the problem.

On my long page there are images that end up loading mid-transition, which is what was causing the jumping. I fixed this with an onload events and a timeout.