父类更改时的 CSS 过渡

Question

我正在使用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;
}

Answer 1

您正在将元素的display从 inline-block 更改为 block 。您无法转换此类更改。您可以轻松地使两者的display相同;但是，这会消除所需的行为。

与通过 display 属性操作元素相反，您可以将display:inline-block换成 float:left，在第二个元素上设置float:none，并保持display:block。这似乎有效。jsFiddle在这里，但由于根本性的变化，它没有产生一个很好的动画。

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

或者，您也可以同时设置display:block。生产这个 - 这里的例子。