的子元素CSS3过渡透明度

我有以下配置的两个元素：的子元素CSS3过渡透明度

<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; 
}

现在，代码不工作，我希望它至。我想要的是，当显示父元素，或者添加了类时，我希望它立即显示，然后我希望子元素也立即显示。然后我希望孩子在4秒后淡出，因为上面的CSS会显示，但它不起作用。任何帮助？

来源

2014-01-23 Dominic Santos

您正在要求在两个状态之间转换，但未定义状态将如何实施。父母如何显示......你还没有说明** actual **方法（点击/悬停/其他）？ –

我用一些JS触发它，即angularjs。 –

这将是您的原始问题的有用信息。 –

呵呵，很有意思。

Here是一个工作小提琴。

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

这允许transition s按预期工作。

此外，我已将transition-delay移至.visible课程，因为这会让孩子在隐藏时立即变为opacity:1，以备下次查看。

来源

2014-01-23 14:58:25

Ick。这是一个非常丑陋的解决方案。 –

@Paulie_D是的，我知道。 –

更重要的是，这只会在页面加载时工作一次（我认为）。我们不知道什么会触发父级的“可见性”。 –

的子元素CSS3过渡透明度

回答

相关问题