jquery - CSS3 动画和更新 DOM

Question

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

假设我有一个包含 2 个子 div 的 div，如下所示:

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

我的目标是，当我在苹果和橙色 div 之间添加一个新的 div 时，我希望它为两个 div 设置动画以滑开，然后新的 div 将进入。

我不太关心如何进行 CSS3 转换，但我的问题是如果在 dom 中替换整个容器 div 是否可行。

因此，由于我们的设计，我们的 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容器，我认为没有任何方法可以得到你想要的翻译效果。您可以进行某种淡入淡出过渡，使旧的淡出而新的淡入。