父类更改时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过渡？

回答

相关问题