Question

我有几个div并排浮动在左边并且分布在多条线上：

<!doctype html>
<html>

<head>
  <style>
    * {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
}

.elem {
    height: 300px;
    width: 150px;
    background-color: rgba(230,230,230,1);
    -webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    margin: 20px;
    padding: 10px;
    float: left;
    transition: all 0.5s ease;
}

.elem:hover {
    -webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    margin: 10px;
    padding: 20px;
    background-color: rgba(130,230,230,1);
}

.w140 { width: 140px; }
.w70  { width: 70px;  }
.w200 { width: 200px; }
.w50  { width: 50px;  }

.grid {
    width: 100%;
}

  </style>
</head>

<body>
  <div class="grid">
    <div class="elem w140">elem1</div>
    <div class="elem">elem2</div>
    <div class="elem w200">elem3</div>
    <div class="elem w50">elem4</div>
    <div class="elem">elem5</div>
    <div class="elem">elem6</div>
    <div class="elem w70">elem7</div>
    <div class="elem w50">elem8</div>
    <div class="elem">elem9</div>
    <div class="elem w200">elem10</div>
</div>
</body>

</html>

这在firefox上运行得非常好。但是在Chrome上（确切地说是版本55.0.2883.87）当悬停一些元素时（例如在“换行符”之前的最后一个元素），布局将在转换期间变得混乱。

如何防止这种情况？

在http://jsfiddle.net/d6rs6gsq/

处小提琴

Answer 1

我找到了一个解决方法，指的是Animating margins and padding with CSS Transition causes jumpy animation

使用css scale transform ，而不是操纵填充和边距值。

 .elem {
    height: 300px;
    width: 150px;
    background-color: rgba(230,230,230,1);
    -webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    margin: 20px;
    padding: 10px;
    float: left;
    transform:scale(1);
    transition: all 0.5s ease;
}

.elem:hover {
    -webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    transform:scale(1.1);
    background-color: rgba(130,230,230,1);
}

http://jsfiddle.net/d6rs6gsq/2/

希望它能解决

Answer 2

当行中的最后一个元素为其前一个元素设置动画时，就会发生这种情况。由于动画为ease而不是linear，因此在组合动画中有一些点，当它们创建“角落”时，下一行中的元素会浮动。

有多种方法可以摆脱这种不必要的影响。首先，您不应为网格元素设置padding或margin动画。动画中的经验法则是：永远不要为元素占据的空间设置动画，而只为元素的渲染图像设置动画。您希望使用transform或position:relative和top|right|bottom|left，因为这些都不会修改元素在文档流中占用的空间。

但是，您的案例中最简单的解决方案是从float:left移除.elem并将display:flex;flex-wrap:wrap;应用于您的网格。 flex网格非常智能，可以根据前一行中元素高度的不一致性来破坏下面的行。这是flexbox模型相对于box模型的众多优势之一。

更新了小提琴：http://jsfiddle.net/websiter/d6rs6gsq/3/

div在css转换期间打破了布局

2 个答案: