CSS过渡延迟显示

Question

我有一个元素。悬停时，它变成了opacity: 0;和500ms。在500ms之后，我需要到达display:none;。

在display属性上使用transition-delay是可能的吗?

.myEl {
transition: opacity 500ms, display 0ms ease 500ms;
opacity: 1;
display: block;
}
.myEl:hover {
display:none;
opacity:0;
}

上面的代码不适合我:(

点击此处:http://jsfiddle.net/onvpn995/

Answer 1

如果使用"display:none";你将无法进行过渡。您可以使用以下命令:

.myEl {
transition: opacity 500ms;
opacity: 1;
display: block;
}
.myEl:hover {
opacity: 0;
visibility:hidden;
}

(可见性:隐藏;与display:none的效果几乎相同