CSS3动画和更新DOM

Question

我是CSS3过渡的新手，想知道这是否可能。

假设我有一个div，里面有两个子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中已经有div，并将其css设置为

display: none; opacity: 0;

默认情况下

。一旦你想要的动作发生了，你可以在div的位置上使用css过渡来滑动它们，并在香蕉div上使用不透明度过渡来使其淡入。如果你告诉我你想让div在点击按钮时显示，我可以给你做一个jsfiddle