html - 延迟 CSS 转换

Question

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

我的问题是我需要转换有某种延迟，以便背面图片出现在顶部图片之前一点，这样您就看不到中间的背景。我做了一个 fiddle 来说明这一点: http://jsfiddle.net/L21sk0oh/

您可以从背景中清楚地看到红色，这是不应该发生的。还有一些奇怪的 Action 正在进行，我在实际元素中没有注意到这一点。

还有我的 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以正确的顺序。