的子元素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過渡透明度

回答

相關問題