在动画弹性盒子上保持行高答案

【问题标题】：Keep row height on animated flex boxes在动画弹性盒子上保持行高
【发布时间】：2017-07-18 23:57:40
【问题描述】：

我正在使用 flex 显示为一组 div，并通过在悬停时将其宽度设置为 95% 来为图像设置动画。这是我的 CSS：

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 1.5%;
  align-items: center;
  flex: 0 1 48%;
}

.img-container img {
  width: 100%;
  transition: width ease-in 0.15s;
}

.img-container:hover img {
  width: 95%;
  transition: width ease-in 0.15s;
}

我的问题是，由于动画持续时间的原因，如果我将鼠标悬停在第一行的图像上，两个动画都会在短时间内处于活动状态，迫使行的高度减小，这使得它下面的元素上下弹跳.

有没有办法强制行在这些动画期间保持其高度不变？

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 1.5%;
  align-items: center;
  margin-right: 2%;
  flex: 0 1 48%;
}

.box:nth-of-type(2n) {
  margin-right: 0;
}

.img-container {
  text-align: center;
  position: relative;
  animation: fadein 1s;
  animation-timing-function: ease-out;
}

.img-container img {
  width: 100%;
  transition: width ease-in 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.img-container:hover img {
  width: 95%;
  transition: width ease-in 0.15s;
}

<div class="container">
  <div class="box">
    <div class="img-container">
      <img src="http://via.placeholder.com/800x800?text=1">
    </div>
  </div>
  <div class="box">
    <div class="img-container">
      <img src="http://via.placeholder.com/800x800?text=2">
    </div>
  </div>
  <div class="box">
    <div class="img-container">
      <img src="http://via.placeholder.com/800x800?text=3">
    </div>
  </div>
  <div class="box">
    <div class="img-container">
      <img src="http://via.placeholder.com/800x800?text=4">
    </div>
  </div>
</div>

this plunker 中的示例。

【问题讨论】：

标签： css animation flexbox css-animations

【解决方案1】：

您改为使用transform: scale() 制作动画。它会给你一个更流畅的动画，其他元素不会受到影响。

.img-container img {
  width: 100%;
  transition: transform ease-in 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.img-container:hover img {
  transform: scale(.95);
}

堆栈sn-p

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 1.5%;
  align-items: center;
  margin-right: 2%;
  flex: 0 1 48%;
}

.box:nth-of-type(2n) {
  margin-right: 0;
}

.img-container {
  text-align: center;
  position: relative;
  animation: fadein 1s;
  animation-timing-function: ease-out;
}

.img-container img {
  width: 100%;
  transition: transform ease-in 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.img-container:hover img {
  transform: scale(.95);
}

<div class="container">
  <div class="box">
    <div class="img-container">
      <img src="http://via.placeholder.com/800x800?text=1">
    </div>
  </div>
  <div class="box">
    <div class="img-container">
      <img src="http://via.placeholder.com/800x800?text=2">
    </div>
  </div>
  <div class="box">
    <div class="img-container">
      <img src="http://via.placeholder.com/800x800?text=3">
    </div>
  </div>
  <div class="box">
    <div class="img-container">
      <img src="http://via.placeholder.com/800x800?text=4">
    </div>
  </div>
</div>

【讨论】：