Question

我有许多左浮动，固定宽度的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位置的动画过渡？

Answer 1

砌砖（http://masonry.desandro.com/）之类的东西对你来说可能是一个不错的选择，我知道它不是纯粹的CSS，但它可以跨浏览器工作，并且它不会对页面速度造成太大影响。

您可以通过上面的链接找到更多信息，但最简单的是您只需要以下JS：

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

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

据我所知，CSS过渡只有在你的元素定位而不是浮动的情况下才会起作用，这对你来说可能是一个可能的解决方案，但如果你想要它们，我可以很快看到它变得非常混乱重新布局较小的窗口大小。如果有一种方法可以用纯CSS做到这一点，我会感到惊喜！

Answer 2

仅限CSS

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

如果您的元素定位而不是简单地浮动，这将有效。

在内容大小更改时动画重新定位左浮动DIV

2 个答案: