显示CSS转换延迟[重复]

Question

我有一个元素。在悬停时，它会在 500ms 中移动 opacity: 0;。在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

如果您使用“显示：无”；您将无法进行过渡。 您可以使用以下内容：

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

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

(as visibility:hidden; 效果和 display:none 差不多)