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

Question

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

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

我也在考虑使用 ::after 伪元素来提供 "loading skeleton" 而不是从服务器检索图像，但现在这不是问题。

代码如下，对应的fiddle：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

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

CSS image and pseudo element transition out-of-sync

html

css

pseudo-element

css-transitions