jquery - 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 转换，但我的问题是，如果在 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

查看带有关键帧的 CSS3 动画。当然，它只是 webkit 和 firefox。

Answer 2

亚当，更容易的是让 div 已经存在于 html 中，并将其 css 设置为

display: none; opacity: 0;

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

Answer 3

如果您绝对必须更换整个 div 容器，我认为没有任何方法可以获得您想要的翻译效果。你可以做某种淡入淡出过渡，旧的淡出，新的淡入。