html - 父类更改时的CSS转换？

Question

我正在使用 CSS 父类为某些数据定义多个布局。当我更改父类时，布局会根据需要完美更改，但我认为添加一些 CSS 动画(过渡)可能会很有趣。我似乎无法让它工作。我发现了另一个类似的问题，但没有答案，而且也不完全相同(或直接)。

这是 fiddle :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;
}

Answer 1

您正在将元素的显示 从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 .