html - 子元素的 CSS3 过渡不透明度

Question

我在以下配置中有两个元素:

<div class="parent">
    <div class="child"></div>
</div>

以及以下 CSS:

.parent{
    display: none;
}
.parent .child{
    opacity: 1;
    transition: opacity 500ms 4s;
}
.parent.visible{
    display: block;
}
.parent.visible .child{
    opacity: 0;
}

现在，代码无法正常工作。我想要的是，当显示父元素或向其添加 visible 类时，我希望它立即显示，然后我希望子元素也立即显示。然后我希望 child 在 4 秒后淡出，正如上面的 CSS 所建议的那样，但它不起作用。有帮助吗？

Answer 1

嗯，很有趣。

Here是一个工作 fiddle 。

我所做的就是作弊。我没有使用 display:none，而是使用 position:absolute;left:-9999px 来“隐藏”元素，并使用 position:static 来“展示”它。

这允许 transition 按预期工作。

此外，我已将 transition-delay 移动到 .visible 类中，因为这将使 child 立即变为 opacity:1 隐藏后，准备好下次查看。