弹出过渡时隐藏滚动条答案

【问题标题】：hide scrollbar when popup transitioning弹出过渡时隐藏滚动条
【发布时间】：2015-04-10 08:37:37
【问题描述】：

请看这个FIDDLE（//更新）

这是我的应用程序的抽象。隐藏弹出窗口后，它将从 DOM 中删除（使用 ReactJS 中的 ReactCSSTransitionGroup）。

当我隐藏弹出窗口时，它会扩展.main-content，因此会出现一个恼人的滚动条。

简单的答案是将overflow:hidden 添加到.main-content，但我不想要这个。

我能做些什么呢，用这张幻灯片来删除弹出窗口，但不放大主要内容

【问题讨论】：

【解决方案1】：

更改元素的height，而不是margin-bottom：

$('#hide').click( function() {
    $('.popup').css("height","0px")
});
$('#pop').click( function() {
    $('.popup').css("height","100px")    
});

【讨论】：

因为我里面有很多元素，换height看起来很难看
@yonatanmn：为什么？您用于bottom 的值也看起来像魔术数字。另外，在运行时使用 jQueryget 元素的实际高度也是没有问题的，所以弹出窗口包含多少元素或者它们是否可能改变并不重要。
忘记最后一条评论：这是问题所在 - 我正在使用 React，所以我不想使用 jquery。和过渡不适用于initial
好的 - 解决了 - 我正在使用带有估计幻数的max-height（太大会使动画变得丑陋）。在过渡时我给.popup{overflow:hidden}