html - css3 转换 : fluid layout animations on floating items

Question

我想在 Silverlight 中实现流体布局转换之类的东西，或者像在 skydrive 中新的 css 转换驱动的照片 ListView 中看到的那样。我认为这可以使用 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>

元素可以是某个正方形或图像或任何东西。 现在我们有一个 float 的元素列表，在调整大小时将元素包装起来。 我想要实现的是让这些元素流畅地动画，当它们被包裹到下一行时，或者漂浮起来为中间新添加的元素腾出空间。

这可能可以通过一些使用绝对定位的 javascript 魔术来完成，但是你将牺牲 css 布局并且必须手动完成所有事情。

有什么方法可以表达类似transition: left, top 1s ease-in-out;的意思吗？

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

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

Answer 1

jQuery 正是这样做的。但是请稍等一下。

我眼睛模糊，非常需要 sleep ，所以如果这只是一半连贯，我深表歉意，但也许它会给你提示正确的方向。

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

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

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

祝你好运! (如果您遇到问题，请发送更多关于确切目标/功能的细节，如果有，请发送当前网站)