使用CSS轉換幻燈片+淡入淡出效果

Question

我試圖使用CSS效果或轉換複製this effect。

Using animations我可以動畫opacity，但只有淡入和height（應控制幻燈片）似乎並沒有在所有的工作:(

我得到的最接近是using javascript設置我想動畫，並在我申請的初始不透明度，但height也不行。而且似乎是在動畫開始稍有延遲元素上的臨時類。

任何其他的想法？

---

所以我最終使用西蒙提到的問題中提到的解決方案提到：使用javascript我將我想要的動畫元素包裹在我應用動畫的「包裝器」DIV中。該包裝將得到其高度從0變爲內容DIV的高度每次點擊標籤時間：

fiddle here

我知道這需要一些JavaScript，但這個想法是讓動畫在CSS中，這就是它所做的。如果JS被禁用，切換將仍然工作...

Answer 1

當所涉及的高度之一爲auto時，您不能在高度上進行動畫製作，必須設置兩個明確的高度。有一個廣泛的解決方法張貼作爲答案similar question.

Answer 2

我做了一個改變你的JS小提琴，我beleive這是你想要的; please see it here.

你需要在div上指定一個最初的高度（0），並且不要忘記overflow：hidden;以便內容不會「泄露」div。但是，您仍然需要使用jQuery/Javascript來切換類，但這意味着需要更少的JavaScript。 （我切換類的「變」，您將在該小提琴看到）

input { 
    display:none; 
} 
label { 
    display:inline-block; 
} 
div { 
    white-space: pre; 
    background: #eee; 
    color: #333; 
    overflow:hidden; 
    height:0; 
    opacity:0; 
    -moz-transition:height 1s opacity 1s; 
    -webkit-transition:height 1s opacity 1s; 
    -o-transition:height 1s opacity 1s; 
    -ms-transition:height 1s opacity 1s; 
    transition:height 1s, opacity 1s; 
} 
.changed { 
    height:200px; 
    opacity: 1; 
} 

我增加了一些供應商的前綴爲我不知道你會使用什麼瀏覽器和我的過渡CSS屬性格式m在Firefox上，所以我需要-moz-前綴lol :)

我能看到的唯一問題是高度：auto或height：100％不會動畫，所以您需要指定ems或px ...如果這將是一個問題（如內容將是動態的），我會建議使用jQuery的高度動畫。