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

Question

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

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

我想通过 transition: height 属性为这个变化设置动画。

在this jsFiddle我试图为包装器高度变化设置动画，但没有成功。

如何获得？

注意:

1) 我不知道每次 show/hide 之后的实际 height 。

2) 我正在寻找纯 css 解决方案。

Answer 1

如果我完全理解你的话，你应该在 .blue 上使用 transition: height

.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;
    }

DEMO