css3转换:浮动项上的流体布局动画

Question

我想归档一些东西，比如Silverlight中的流体布局转换，或者类似于skydrive中新的css转换支持的photolist视图。我认为这可以通过使用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 ease-in-out;这样的话？

我尝试将该项包装在某个父div中，该父div是浮动的，而该项本身具有绝对位置，但该位置是相对于其父div的，因此没有转换。

这是第九频道的一段视频，显示了几个效果，我说的是1:20左右出现的那个。

Answer 1

jQuery正是这样做的。但请后退一秒钟。

我眼睛模糊，需要好好睡觉，所以如果这只是半连贯的话，我很抱歉，但也许它会让你朝着正确的方向前进

首先，重要的是要考虑适合这份工作的工具。CSS3非常棒，但向后兼容性不太好，所以不管怎样，旧浏览器都会依赖javascript。如果你真的想去做，Nuttuts总是一个很好的资源，这里有一篇关于CSS3的文章：

毫无疑问，我建议使用jQuery（一个javascript库）。你不必使用绝对的定位，这一切都与你的具体目标有关。你必须发布它才能得到更具体的建议。Animate（）是一个很好的通用函数，还有Fadin（）、fadeout（），它们应该满足这一需求。搜索示例，你应该能找到你想要的东西。

有预制的脚本和工具可以满足你的所有需求，我会在谷歌上搜索你想要的脚本/插件。很有可能，它就在那里。这也是一个非常流行的需求，至少在一般概念上是这样。

祝你好运！（如果您遇到问题，请发送更多关于确切目标/功能的详细信息，如果您有，请发送当前网站的详细信息）