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中，这是浮动的，而项目本身具有绝对定位，但是该位置相对于其父项，因此没有转换。

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

Answer 1

jQuery 正是如此。但是请等一下。

我模糊不清，需要这么睡觉，所以如果这只是半连贯的话我会道歉，但也许它会让你朝正确的方向倾斜。

首先考虑适合工作的正确工具是很重要的。 CSS3很棒，但不是非常向后兼容，所以无论如何你都依赖于旧版浏览器的javascript。如果您确实想要这样做，Nuttuts始终是一个很好的资源，这里是article on CSS3：

毫无疑问，我会建议jQuery（一个javascript库）。您不必使用绝对定位，而是完全取决于您的具体目标。您必须发布该信息才能获得更具体的建议。 Animate（）是一个很好的通用函数，还有Fadin（），fadeout（），它应该满足那些确切需要。搜索示例，您应该找到您要查找的内容。

有预先制作的脚本和工具可以实现您能想象到的所有内容，我会谷歌搜索脚本/插件，以满足您的需求。机会是，它就在那里。这也是一个非常受欢迎的需求，至少是一般概念。

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

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

1 个答案: