1

我想在 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 中，即浮动，而项目本身具有绝对定位，但该位置是相对于其父级的，因此那里没有过渡。

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

4

1 回答 1

0

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

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

首先，重要的是要考虑适合这项工作的正确工具。CSS3 很棒，但不是很向后兼容，所以无论如何你都会依赖于旧浏览器的 javascript。如果您确实想这样做，Nuttuts 总是一个很好的资源，这里有一篇关于 CSS3的文章：

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

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

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

于 2011-09-07T06:51:08.833 回答