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

2023年11月11日 213次阅读

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

最佳答案 您正在将元素的显示从内联块更改为块.你无法转变这种变化.你可以很容易地只显示两者;但是,这消除了所需的行为.

与通过display属性操作元素相反,您可以在第二个元素上交换display：inline-block out for float：left,set float：none,并保持display：block.这似乎有效. jsFiddle here,但由于激进的变化,它不会产生很好的动画.

.layoutCards .entity {
    float: left;
}

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

或者,您也可以在两者上设置display：block.制作本 – example here.

点赞