html - 为什么悬停时不透明度的变化会使第二行的 flex children 移动/改变？

Question

嘿伙计们看看这个例子。 (看全屏)你可以看到元素在悬停时改变不透明度。

然而，flex-wrap 到第二行的 flex items 似乎随着相同的悬停移动或改变高度......它看起来像弹跳效果。除了不透明度，应该没有什么不同。我试过在我的过渡中只针对不透明度，试过 flex: 0 0 23%;所以链接不应该改变大小，但仍然会得到相同的结果。

基本上，因为我添加了不透明度悬停/过渡，第二行 flex 元素在悬停时弹跳。

这是怎么回事？

.nav-dropdown {
  display: block;
  width: 100%;
  max-width: 980px;
  padding: 30px;
  background-color: #fbfbfb;
}

.nav-dropdown-image-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-link {
  flex: 0 1 23%;
  margin-bottom: 20px;
}

.image-link a {}

.image-link a img {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  opacity: 1;
  transition: 0.3s;
}

.image-link a img:hover {
  opacity: 0.9;
}

<div class="nav-dropdown">
  <div class="nav-dropdown-image-links">
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
  </div>
</div>

Answer 1

使用下面的样式

.image-link * {
    -webkit-backface-visibility: hidden;
}

这link解释我们为什么需要它。

.nav-dropdown {
  display: block;
  width: 100%;
  max-width: 980px;
  padding: 30px;
  background-color: #fbfbfb;
}

.nav-dropdown-image-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-link {
  flex: 0 1 23%;
  margin-bottom: 20px;
}

.image-link a {}

.image-link a img {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  opacity: 1;
  transition: 0.3s;
}

.image-link a img:hover {
  opacity: 0.9;
}
.image-link * {
    -webkit-backface-visibility: hidden;
}

<div class="nav-dropdown">
  <div class="nav-dropdown-image-links">
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
  </div>
</div>