CSS3 动画和更新 DOM答案

【问题标题】：CSS3 animations and updating the DOMCSS3 动画和更新 DOM
【发布时间】：2012-12-30 03:20:57
【问题描述】：

我是 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 任务吗？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

亚当，更简单的方法是让 div 已经存在于 html 中，只需将其 css 设置为

display: none; opacity: 0;

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

【讨论】：