DEMO

Question

假设我有一个有2个内部div的包装div，第二个内部div有一个show / hide的切换，因为它是一个内部元素，它的出现/消失会导致高度变化包装。

<div class="wrapper">
    <div class="red">
    </div>
    <div class="blue">
    </div>
</div>

我希望通过transition: height属性为此更改设置动画。

在this jsFiddle中，我尝试动画包装器高度变化没有成功。

如何获得？

注意：

1）我不知道每次展示/隐藏后的实际height。

2）我正在寻找纯粹的css解决方案。

Answer 1

如果我完全理解你，你应该在transition: height

上使用.blue

.blue {
        background-color : blue ; 
        width : 500px ; 
        height : 0px ; 
        -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
        transition: height 2s;
    }
    .blue.show {
        height:300px;
    }

由其内部元素显示或隐藏引起的div高度变化的过渡

1 个答案:

DEMO