5

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

1 回答 1

3

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

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

.layoutCards .entity {
    float: left;
}

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

或者，您也可以同时设置display:block两者。在这里制作这个例子。

于 2013-10-29T17:05:24.507 回答