当内容发生变化时，使用过渡调整父对象的高度

Question

我有一个外部div，如下所示：

.text-bg2 .text2.first{
    width:75%;
    height:auto;
    min-height:50%; 
    transition:all 1s ease;
    -webkit-transition:all 1s ease;
}

在里面我有一个p元素，当用户点击我的子菜单中的一个选择时，它通过jQuery添加。因此，当他点击"stackoverflow"时，"stackoverlow"的文本会被淡入。问题是，当有人点击菜单点时，我的.first的高度会发生变化，而没有一个很好的平滑过渡，这会淡入一个p元素，其中p元素高于高度的50%。有人能解释一下为什么过渡在这里不起作用吗？有没有纯css的解决方法？我知道我可以通过使用jQuery的.oouterheight来实现这一点，但我真的想知道是否有其他解决方案？

jsfiddle补充道：http://jsfiddle.net/kzbyd15k/1/注意：jsfiddle没有优化，但它足以看到效果。此外，我知道jquery不是最优的，但我太懒了，没有重写它。

Answer 1

将height:0添加到.text2类并为其配置转换，当您单击任何项目时，计算子项的高度并将其分配给父项。textdiv

$current.parent().css('height', $current.height() + 'px')

这是你的小提琴叉http://jsfiddle.net/ddm7e4mt/