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类时，我希望它立即显示，然后我希望子元素也立即显示。然后我希望孩子在4秒后淡出，因为上面的CSS会建议，但它不起作用。有什么帮助吗？

Answer 1

嗯，非常有趣。

Here是一个有效的小提琴。

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

这允许transition按预期工作。

此外，我已将transition-delay移至.visible课程，因为这样可以让儿童在隐藏时立即成为opacity:1，为下次观看做好准备。

子元素的CSS3过渡不透明度

1 个答案: