Question

I’m new to CSS3 transitions and wondering if this is possible.

Lets say I have a div with 2 child divs in it, like so:

<div id="container">
    <div id="apple">Apple</div>
    <div id="orange">Orange</div>
</div>

My goal is that when I add a new div in between the apple and orange divs, I’d like it to animate the two divs to slide apart and the new div would enter in.

I’m not so concerned about figuring out how to do the CSS3 transitions, but my question is whether this is possible if the entire container div is replaced in the dom.

So due to our design our AJAX response doesn’t reply with just a new div to go in the container. Instead it returns the entire div container again, but including the new div in the center, such as:

<div id="container">
    <div id="apple">Apple</div>
    <div id="banana">Banana</div>
    <div id="orange">Orange</div>
</div>

Is this possible to animate something like this when the elements animating are being replaced? Is this more of a jQuery task?

Answer 1

If you absolutely have to replace the whole div container, I don’t think there is any way to get the desired translation effect you want. You could do some kind of fade transition where the old fades out as the new fades in.