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，并保持{{ 1}}。这似乎有效。 jsFiddle here，但由于根本性的变化，它不会产生很好的动画。

display:block

或者，您也可以在两者上设置.layoutCards .entity { float: left; } .layoutList .entity { float: none; display:block; }。制作此作品 - example here。

父类更改时的CSS转换？

1 个答案: