css3 过渡：浮动项目上的流体布局动画
我想在 Silverlight 中实现诸如流体布局转换之类的东西，或者像在 skydrive 中新的 css 转换驱动的照片列表视图中看到的那样。我认为这可以使用 CSS3 以某种方式完成。
假设我有这样的东西：
<div class="items">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
</div>
<style>
.item {
float: left;
}
</style>
其中项目可以是一些正方形或图像或任何东西。 现在我们有一个浮动的项目列表，它在调整大小时将项目包裹起来。 我想要实现的目标是让这些项目在被包裹到下一行时流畅地进行动画处理，或者漂浮到中间为新添加的项目腾出空间。
这可能可以通过使用绝对定位的一些 javascript 魔法来完成，但是这样你将牺牲 css 布局并且必须手动完成所有操作。
有什么办法可以表达类似 transition: left, top 1s escape-in-out; 的内容吗？
我尝试将项目包装在某个浮动的父级 div 中，而项目本身具有绝对定位，但该位置是相对于其父级的，因此那里没有过渡。
这里是来自第9频道的一段视频，显示了几种效果，我说的是1:20左右出现的那个。
I would like to archieve something like fluid layout transitions in Silverlight, or like seen in the new css transition powered photolist view in skydrive. I thought this could be done using CSS3 somehow.
assuming I have something like this:
<div class="items">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
</div>
<style>
.item {
float: left;
}
</style>
Where item could be some square or an image or anything.
Now we have a floated list of items, that wraps the items when getting resized.
What I'd like to achieve is getting those items to animate fluently, when they're getting wrapped to the next row, or float away to make place for an newly added item in between.
This could probably done with some javascript magic using absolute positioning, but then you'll sacrifice css layouting and have to do everything manually.
Is there any way to say something like transition: left, top 1s ease-in-out;?
I tried wrapping the item inside some parent div, that is floated, while the item itself has absolute positioning, but then the position is relative to its parent, so no transition there.
Here is a video from channel9 that shows several effects, I was talking about the one thats showing up around 1:20.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
jQuery 正是这样做的。但请稍等一下。
我的眼睛模糊，需要睡觉，所以如果这只是一半连贯，我很抱歉，但也许它会提示你正确的方向。
首先，重要的是要考虑适合这项工作的正确工具。 CSS3 很棒，但向后兼容不太好，所以无论如何，您还是要依赖旧版浏览器的 javascript。如果您确实想尝试，Nuttuts 始终是一个很好的资源，这里有一个 关于 CSS3 的文章：
毫无疑问，我会建议 jQuery（一个 javascript 库）。您不必使用绝对定位，这完全取决于您的具体目标。您必须发布该内容才能获得更具体的建议。 Animate() 是一个很好的通用函数，还有 Fadin()、fadeout()，它们应该满足确切的需求。搜索示例，您应该可以找到您要查找的内容。
有预制的脚本和工具，几乎可以满足您可以想象的所有需求，我会在谷歌上搜索脚本/插件，以找到您正在寻找的内容。有可能，它就在那里。这也是一个非常普遍的需求，至少是一般概念。
祝你好运！ （如果您遇到问题，请发送有关确切目标/功能的更多详细信息，如果有，请发送当前的网站）
jQuery does exactly that. But back up for a second.
I'm blurried eyed and need so sleep, so I apologize if this is only half coherent, but maybe it'll tip you in the right direction.
First it's important to consider the right tool for the job. CSS3 is awesome, but not very backwards compatible, so you'd be depending on javascript for older browsers anyway. If you do want to go for it, Nuttuts is always a great resource, and here's an article on CSS3:
Without a doubt, I would suggest jQuery (a library of javascript). You don't have to use absolute positioning, and it's all about your specific goal. You'd have to post that to get more specific advice. Animate() is a good all purpose function, along with Fadin(), fadeout(), which should serve that exact need. Search for examples, and you should find what you're looking for.
There's premade scripts and tools for just about everything you can imagine, I'd google for scripts/plugins for exactly what you're looking for. Chances are, it's out there. That's a pretty popular need as well, at least that general concept.
Good luck! (if you're having trouble, send more specifics of the exact goal/function, and if you have it, the site as it is currently)