CSS3 动画和更新 DOM
我是 CSS3 过渡的新手，想知道这是否可行。
假设我有一个包含 2 个子 div 的 div，如下所示：
<div id="container">
<div id="apple">Apple</div>
<div id="orange">Orange</div>
</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 任务吗？
I'm new to CSS3 transitions and wondering if this is possible.
Lets say I have a div with 2 child divs in it, like so:
<div id="container">
<div id="apple">Apple</div>
<div id="orange">Orange</div>
</div>
My goal is that when I add a new div in between the apple and orange divs, I'd like it to animate the two divs to slide apart and the new div would enter in.
I'm not so concerned about figuring out how to do the CSS3 transitions, but my question is whether this is possible if the entire container div is replaced in the dom.
So due to our design our AJAX response doesn't reply with just a new div to go in the container. Instead it returns the entire div container again, but including the new div in the center, such as:
<div id="container">
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="orange">Orange</div>
</div>
Is this possible to animate something like this when the elements animating are being replaced? Is this more of a jQuery task?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果你绝对必须更换整个div容器，我认为没有任何方法可以得到你想要的翻译效果。您可以进行某种淡入淡出过渡，其中旧的淡出，新的淡入。
If you absolutely have to replace the whole div container, I don't think there is any way to get the desired translation effect you want. You could do some kind of fade transition where the old fades out as the new fades in.
查看带有关键帧的 CSS3 动画。当然只有 webkit 和 firefox。
Look at CSS3 animation with keyframes. It's webkit and firefox only of course.
Adam，更简单的方法是在 html 中已有 div，然后将其 css 设置
为默认值。一旦你想要的动作发生，你可以在 div 的位置上使用 css 过渡来很好地向上滑动它们，并在香蕉 div 上使用不透明过渡以使其淡入。如果你告诉我，我可以为你制作一个 jsfiddle您希望通过单击按钮来显示 div。
Adam, what would be easier is to have the div already there in the html, and just set its css to
by default. Once the action that you want occurs, you can use a css transition on the position of the divs to slide them up nicely and have an opacity transition on the banana div to make it fade in. I could make you a jsfiddle if you told me that you want the divs to come in upon a click on a button.