css3 过渡：浮动项目上的流畅布局动画

Question

我想归档 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 ease-in-out;之类的吗？

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

Here 是来自 channel9 的视频，它显示了几种效果，我说的是在 1:20 左右出现的那个。

Answer 1

jQuery 正是这样做的。但请稍等片刻。

我的眼睛模糊了，需要好好睡觉，所以如果这只是部分连贯，我很抱歉，但也许它会给你指明正确的方向。

首先，重要的是要考虑适合这项工作的工具。 CSS3 很棒，但不是很向后兼容，所以无论如何你都会依赖于旧浏览器的 javascript。如果你真的想去，Nuttuts 总是一个很好的资源，这里有一个article on CSS3：

毫无疑问，我会推荐 jQuery（一个 javascript 库）。您不必使用绝对定位，这完全取决于您的特定目标。您必须发布该内容以获得更具体的建议。 Animate() 是一个很好的通用函数，还有 Fadin()、fadeout()，它们应该可以满足确切的需求。搜索示例，您应该会找到所需的内容。

几乎所有你能想象到的东西都有预制的脚本和工具，我会在谷歌上搜索你正在寻找的脚本/插件。很有可能，它就在那里。这也是一个非常受欢迎的需求，至少是一般概念。

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