CSS3动画和更新DOM

Question

我是新来CSS3转换并想知道这是否可能。

可以说我有一个div 2孩子的div在里面，像这样：

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

我的目标是，当我在苹果和橘子之间的div添加一个新的div，我想它以动画两个div滑动分开，新的div将进入。

我不太在意搞清楚如何做CSS3转换，但我的问题是这是否可能，如果整个容器div是取而代之的是dom。

所以由于我们的设计，我们的AJAX响应没有回复只是一个新的div去容器。相反，它再次返回整个DIV容器，但包括在中心的新的div，如：

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

这是可能被替换的元素动画时，动画这样的事情？这是更多的jQuery任务？

Answer 1

如果您绝对需要更换整个div容器，我不认为有任何方法可以获得所需的翻译效果。你可以做一些淡入淡出的过渡，旧的淡入淡出作为新的淡入。

Answer 2

看看关键帧的CSS3动画。当然只有webkit和firefox。

Answer 3

亚当，你会更容易为有格已经存在于HTML中，并设置其CSS来

display: none; opacity: 0; 

默认。一旦你想要的动作发生，你可以在div的位置上使用css转换来很好地滑动它们，并且在banana div上有一个不透明的转换，使它淡入。如果你告诉我，我可以让你成为一个jsfiddle您希望div在点击按钮时进入。