您如何延迟Z索引转换？

Question

我有一个div，它会根据不透明度进行移入和移出，但是其上的z索引会将移出隐藏起来。 请参阅jfiddle进行澄清。

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

放置计时器或过渡到z-index以便仅在淡出之后才发生的最简单方法是什么？ 解决方案的精简将不胜感激。 如果可能的话，我也不想使用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 贝塞尔曲线计时功能将停止苏打柳所说的跳跃效果。

小提琴

Answer 2

使z索引过渡延迟2 s到过渡，并在过渡时将其删除。

在#pop中

transition: opacity 2s, z-index 0s 2s;

在#pop：target中

transition: opacity 2s, z-index 0s 0s;

的jsfiddle