父類更改時CSS過渡？

我正在使用CSS父類來爲某些數據定義多個佈局。當我更改父類時，佈局會根據需要完美更改，但我認爲添加一些CSS動畫（轉換）可能很有趣。我似乎無法讓它工作。我發現了另外一個類似的問題，但它沒有答案，並且它不完全相同（或簡單）。父類更改時CSS過渡？

這裏是小提琴：http://jsfiddle.net/scottbeeson/wmK2F/1/

我真的不關心什麼的轉變，現在，高度，寬度，顏色，不管。一旦有人告訴我我做錯了什麼，我可以調整它。

HTML：

<div id="toggleLayout">Click To Toggle</div> 
<div class="layout layoutCards"> 
    <span class="entity"> 
     Test 
    </span> 
    <span class="entity"> 
     Test 
    </span>  
    <span class="entity"> 
     Test 
    </span>  
    <span class="entity"> 
     Test 
    </span>  
</div>

CSS：

.entity { /* animate */ 
    -webkit-transition: height .5s linear; 
    -moz-transition: height .5s linear; 
} 

.layoutCards .entity { 
    display: inline-block; 
    border: 1px solid blue; 
    margin: 5px; 
    height: 100px; 
    width: 100px; 
} 

.layoutList .entity { 
    display: block; 
    border: 1px solid blue; 
    margin: 5px; 
    height: 20px; 
}

來源

2013-10-29 Scott Beeson

您無法同時將'display'值從'inline-block'更改爲'block'。 – CBroe

你正在改變的元素的display從inline-block到block。你不能轉換這樣的改變。你可以很容易地使display都相同;然而，這消除了所需的行爲。

與之相對操縱通過display屬性的元素，你可以換display:inline-block出來float:left，設置float:none，在第二元件上，並保持display:block。這似乎工作。 jsFiddle here，但它不會產生一個漂亮的動畫，由於劇烈的變化..

.layoutCards .entity { 
    float: left; 
} 

.layoutList .entity { 
    float: none; 
    display:block; 
}

或者，您也可以只設置display:block兩個。生產這個 - example here。

來源

2013-10-29 17:05:24

是的，我認爲你是對的。這只是不會起作用。太糟糕了，我喜歡這個功能，但是轉換有點刺耳。感謝您的解釋和替代例子。 –

父類更改時CSS過渡？

回答

相關問題