Question

我有一个像这样的外部div：

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

里面我有一个p元素，当用户点击我的子菜单中的选项时，它会通过jQuery添加。所以当他点击时我们说＆＃34; stackoverflow＆＃34; ＆＃34; stackoverflow＆＃34;的文本正在消失。问题是，我的.first的高度只是变化而没有一个很好的平滑过渡，当有人点击一个逐渐消失p元素高于50％高度的menupoint。有人能解释为什么过渡在这里不起作用吗？有一个纯粹的CSS解决方案吗？我知道我可以通过jQuery的.outerheight来做到这一点，但我真的想知道是否还有其他解决方案吗？

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

Answer 1

将高度：0添加到.text2类并为其配置转换，当您单击任何项目时计算子高度并指定父级.text div

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

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

当内容发生变化时，调整父级的高度？

1 个答案: