CSS 图像和伪元素过渡不同步

Question

我正在尝试为图像及其容器的伪元素创建过渡，但由于某种原因，这些过渡似乎彼此不同步，导致伪元素达到opacity: 0在图像之前状态。 我尝试了各种样式规则组合，但我从未成功完成 ease-in-out 转换以正常工作。

以下是当前代码的一些上下文：图像被有意填充，以提供更好的视觉效果（居中）其内容。将始终保证将使用的图像具有白色背景。这就是为什么我使用具有白色背景颜色的伪元素来填充图像未覆盖的垂直空间。 背景图像应占容器的整个宽度/高度，并且不能保证其背景为白色。 想要的效果是伪元素和图像同时到达opacity: 0，使其看起来像一个单独的元素。

我还在考虑使用::after 伪元素来提供“加载骨架”，而不会从服务器检索到图像，但现在这不是问题。

这是代码和相应的小提琴：https://jsfiddle.net/rjk2z31d/1/

*,
*::before,
*::after {
  box-sizing: border-box;
}

.box {
  width: 248px;
  height: 320px;
}

.image-box {
  position: relative;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 0;
  background-color: #FFFFFF;

  &::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (100% + (100% / 3));
  }

  img {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translate3d(0, -50%, 0);
    padding: 16px 16px;
  }

  &::before, img {
    background-color: #FFFFFF;
    opacity: 1;
    transition: all 1.5s ease-in-out;
  }

  &:hover {
    &::before, img {
      opacity: 0;
    }
  }
}

<div class="box">
  <div class="image-box" style="background-image: url('https://via.placeholder.com/248x320/FF0000/000000?text=Background')">
    <img src="https://via.placeholder.com/248x320/FFFFFF/000000?text=Image">
  </div>
</div>

Answer 1

实际上，它们都以相同的速度褪色。 您所说的不同步效果是由于不透明度重叠造成的错觉。

如果您设置两个元素的初始不透明度，则更容易理解发生了什么。

图像的褪色白色添加到伪元素的褪色白色看起来不如伪元素的褪色白色单独透明。

通过下图查看效果：

如果您需要确信它们的同步，请在 :hover 处理程序中添加一个转换规则。结果按预期同步。

作为一种解决方法，我建议您尝试找出一种比淡化重叠元素更好的方法。 你可以使用 <picture> 标签和 css object-fit 属性来去掉那些空格。

picture doc

object-fit doc