html - 你如何延迟 z-index 转换？

Question

我有一个 div，它通过不透明度过渡进出，但是它上面的 z-index 隐藏了过渡。有关说明，请参阅 jfiddle。

http://jsfiddle.net/sprigmendle/16zfv3jx/2/

在 z-index 上放置计时器或过渡的最简单方法是什么，以便它仅在淡出后发生？解决方案的 fiddle 将不胜感激。如果可能的话，我也不想使用 Jquery。

---

html

<a href="#pop">appear</a>
<div id="big"></div>

<div id="pop" id="pop_close">
    <a href="#pop_close">disappear</a>
</div>

---

CSS

#big {
    height: 10em;
    width: 10em;
    background: blue;
}

#pop{
    height: 10em;
    width: 10em;
    background: yellow;
    opacity:0;
    position: relative;
    left -7em;
    top: -5em;
    z-index: -1;
    transition: opacity 2s;
}

#pop:target {
    opacity: 1;
    z-index: 1;
}

#pop_close:target {
    opacity: 0;
    z-index: -1;
}

Answer 1

您可以通过将 z-index 添加到您的转换中来模拟延迟。由于z-index上没有动画，需要2秒才能看到效果。

#pop {
    transition: opacity 2s, z-index 2s cubic-bezier(0,1,1,0);
}

cubic-bezier计时函数会停止sodawillow 的跳跃效果正在谈论。

fiddle