在动画弹性框上保持行高

Question

我使用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;
}

我的问题在于，由于动画的持续时间，如果我将鼠标悬停在顶行的图像上，短暂时间两个动画都处于活动状态，迫使行的高度降低，这使得其下方的元素上下跳动。

在这些动画中是否有办法强制行保持高度不变？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

this plunker中的示例。

Answer 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);
}

Stack snippet

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;