父类更改时的 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：

<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>

Answer 1

您正在将display元素的更改inline-block为block。您无法过渡此类更改。您可以轻松地使display两者相同；然而，这消除了所需的行为。

与通过属性操作元素相反display，您可以在第二个元素上替换display:inline-block为float:left、 set float:none、 和 keep display:block。这似乎有效。jsFiddle 在这里，但由于彻底的变化，它不会产生漂亮的动画。

.layoutCards .entity {
    float: left;
}

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

或者，您也可以同时设置display:block两者。在此生成此示例。