CSS3在迴流焊上的轉換

以此dom爲例。CSS3在迴流焊上的轉換

<div id="container" style="transition: width 1s ease-in-out;"> 
    <div style="width: 400px; display: none;"></div> 
    <div style="width: 200px;"></div> 
</div>

如果我交替哪個內部div被隱藏，我可以觸發CSS3轉換（通過重排）嗎？如果這是可能的，我可以添加許多內部div，並順利交替，而不必知道它們的大小。

來源

2011-04-12 Drew

我不認爲它可以通過CSS單獨使用 - 轉換不是可繼承的，所以它們必須應用於問題的嵌套元素，並且寬度轉換不能在沒有寬度的情況下應用。嵌套的div將需要它的width和0設置爲在它們之間轉換，不管是懸停還是JS點擊或某個事件

但是，我認爲我真的無法理解問題;

#container div {transition: width 1s ease-in-out;}

將其應用到所有孩子的div那麼你只要切換顯示和寬度。然而你在想反正這樣做呢？

來源

2011-04-13 14:02:54 clairesuzy

我試圖根據可見內容轉換b/t容器可以擁有的兩種不同大小。當顯示div＃1時，#container將在隱藏時重新刷新至400px寬，#container將回流至200pixels。但是，這不能通過css轉換動畫（我知道） – Drew 2011-04-14 17:48:53

你可以這樣做，但我不能設置一個漂亮的例子。顯示本身不會過渡，所以只要CSS顯示：財產將被切換，改變將是即時的，但是如何切換元素的寬度/高度，懸停說（我知道這裏可能有腳本，在這種情況下，這可以腳本化，但我採取它在理論上是說話嗎？） - [** sample **]（http://jsfiddle.net/clairesuzy/peAmm/） - 它不是很漂亮，因爲我已經離開10px來保持懸停，但理論可能會持有一些東西？ – clairesuzy 2011-04-14 23:33:45

大聲笑這是相當聰明的，我不得不在FF中打開它看到這裏的徘徊有點瘋狂。我想真正的答案是，我應該過渡內容而不是僅僅在網頁上播放它。感謝這是一些很酷的CSS – Drew 2011-04-18 19:38:50

CSS3在迴流焊上的轉換

回答

相關問題