1

我有许多左浮动、固定宽度的 DIV。当窗口大小增加并且更多的 DIV 适合一行时，DIV 会立即重新定位。

我想知道是否有一种方法可以为重新定位设置动画，以便用户更容易跟随某个框来查看它移动到的位置 - 最好只使用 CSS。

.box {
  float:left;
  width: 200px;
  min-height:200px;
  background:red;
  margin:20px;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

目前，仅 WebKit 的解决方案就可以了（它是嵌入了 WebView 的本机应用程序）。我试过-webkit-transition:all 2s了，没有效果...

编辑：

也许 CSS3 灵活的盒子布局允许 DIV 位置的动画转换？

4

2 回答 2

2

像砖石（http://masonry.desandro.com/）这样的东西在这里可能是一个不错的选择，我知道它不是纯 CSS，但它可以跨浏览器工作，并且不会对页面速度产生太大影响。

您可以通过上面的链接了解更多信息，但最简单的情况下，您只需要以下 JS：

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

（你显然需要在页面的某处包含脚本和一些基本的 CSS 样式）

据我所知，CSS 过渡仅在您的元素被定位而不是浮动时才有效，这可能是您的一个可能的解决方案，但如果您希望它们重新布局，我可以看到这很快就会变得非常混乱较小的窗口尺寸。虽然如果有办法用纯 CSS 做到这一点，我会很惊喜！

于 2013-07-29T09:40:22.220 回答
0

CSS only

.box { transition: top 0.5s linear, left 0.5s linear }

This will work if your elements are positioned rather than simply floated.

于 2013-07-29T09:33:44.120 回答