Question

我有一个由不透明度转换的div，但是它上面的z-index隐藏了转换。请参阅jfiddle以获得澄清。

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

什么是最简单的方法来放置定时器，或转换到z-index，所以它只在淡出后发生？一个解决方案的jfiddle将不胜感激。如果可能的话，我也不想使用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

Answer 2

使z-index转换为2s延迟到转换，并在转换时将其删除。

在#pop

中

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

在#pop：target

中

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

JSFiddle

你如何推迟z指数转换？

2 个答案: