CSS转换延迟显示

Question

我有一个元素。在悬停时，它会opacity: 0;中的500ms。在500ms之后我需要转到display:none;。

是否可以在transition-delay属性上使用display？

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

.myEl:hover {
display:none;
opacity:0;
}

以上代码对我不起作用：（

在这里小提琴：http://jsfiddle.net/onvpn995/

Answer 1

如果您使用＆＃34; display：none＆＃34 ;;你将无法进行过渡。 您可以使用以下内容：

.myEl {
transition: opacity 500ms;
opacity: 1;
display: block;
}

.myEl:hover {
opacity: 0;
visibility:hidden;
}

（因为可见性：隐藏;与display：none具有几乎相同的效果）