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在點擊按鈕時進入。