代码之家 › 专栏 › 技术社区 › Alexandra

将行高度保持在动画弹性框上

css-animations flexbox animation css

Alexandra · 技术社区 · 9 年前

.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

1 回复 | 直到 9 年前

Asons Oliver Joseph Ash 9 年前

使用设置动画 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);
}

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