CSS 转换延迟

Question

我有 2 张图像相互重叠，绝对定位，在我的示例中它们是方形的，但在我的实际项目中，它们是具有一定透明度的边框的 png，因此需要隐藏后面的图像，直到它出现悬停。

我的问题是我需要过渡来进行某种延迟，以便后面的图片出现在上面的图片之前一点，这样你就看不到中间的背景。我做了一个小提琴来说明这一点： http://jsfiddle.net/L21sk0oh/

您可以清楚地看到背景中的红色，这是不应该发生的。还有一些奇怪的动作正在发生，我在实际项目中没有注意到这一点。

还有我的 HTML：

<div class="product1">
    <img class="active" src="http://lorempixel.com/400/200/sports" alt="">
    <img class="inactive" src="http://lorempixel.com/400/200/" alt="">
</div>

还有我的 CSS：

body{
    background: red;
}
.product1{
  position: relative;
    width: 400px;
    height: 200px;
}

img{
  position: absolute;
  top:0;
  left:0;
}

.product1 img.active{
  transition: all 1s ease-in-out;
  opacity: 1;
}

.product1 img.inactive{
  transition: all 1s ease-in-out;
  opacity: 0;
}

.product1:hover img.active{
  opacity: 0;
}

.product1:hover img.inactive{
  opacity: 1;
}

Answer 1

您可以为transition-delay property 指定一个值。

在这种情况下，我在.product1 img.active 的转换简写中添加了1s 延迟：

Updated Example

.product1 img.active {
  transition: all 1s 1s ease-in-out;
  opacity: 1;
}

以上等价于：

.product1 img.active{
  transition: all 1s ease-in-out;
  transition-delay: 1s;
  opacity: 1;
}

确保您以正确的顺序添加transition shorthand properties。