Javascript 使用带填充/高度的过渡时的抖动动画

我正在制作的子电台动画功能有一些问题。我的代码正常工作，但是动画中有一些抖动，因为最大高度没有按照CSS3转换的预期工作

下面是代码，你可以自己看看我在描述什么。不管怎样，我可以软化动画中的缓和

$（函数（）{
/*--如果选中/未选中第二个选项，则显示/删除辅助收音机选择--*/
$（'input[type=“radio”]”）。单击（函数（）{
如果（$（'#selection2'）。是（':checked'））{
setTimeout（函数（）{
$（'#subsection1'）.addClass（'display-subsection'）；
}, 200);
}
/*--如果不再选择收音机，请删除选中的子节--*/
如果（$（'#selection2'）。是（“：not（：checked）”）{
$（'input[name=request-subsection1]'）。removeAttr（'checked'）；
$（'#subsection1'）.removeClass（'display-subsection'）；
}
});
/*--如果选中/取消选中第三个选项，则显示/删除另一个辅助收音机选择--*/
$（'input[type=“radio”]”）。单击（函数（）{
如果（$（'#selection3'）。是（':checked'））{
setTimeout（函数（）{
$（'#subsection2'）.addClass（'display-subsection'）；
}, 200);
}
/*--如果不再选择收音机，请删除选中的子节--*/
如果（$（“#selection3”）是（“：not（：checked）”）{
$（'input[name=request-subsection2]'）。removeAttr（'checked'）；
$（'#subsection2'）.removeClass（'display-subsection'）；
}
});
});
/*====================
造型
==================== */
/*--样板CSS--*/
英雄容器{
位置：相对位置；
}
.集装箱{
背景色：#达达达；
垫面：5%；
垫底：5%；
}
标签{
显示：块；
}
标签：悬停{
光标：指针；
}
/*--自定义联系人表单--*/
#自定义子窗体{
-webkit转换：所有0.2秒易入易出；
-moz转换：所有0.2秒缓进缓出；
-o型过渡：所有0.2秒缓进缓出；
过渡：所有0.2秒缓进缓出；
}
.隐藏小节{
明确：两者皆有；
不透明度：0；
最大高度：0；
溢出：隐藏；
-webkit转换：所有0.2秒易入易出；
-moz转换：所有0.2秒缓进缓出；
-o型过渡：所有0.2秒缓进缓出；
过渡：所有0.2秒缓进缓出；
}
.显示小节{
不透明度：1；
最大高度：100%；
填充顶部：30px；
}
/*--更换单选按钮--*/
输入[type=“radio”]{
显示：无；
}
输入[type=“radio”]+标签范围{
显示：块；
宽度：20px；
高度：20px；
保证金：0自动；
垂直对齐：中间对齐；
背景：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png)-38px顶部无重复；
光标：指针；
}
输入[type=“radio”]：选中+标签范围{
背景：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png)-57px顶部无重复；
}
/* ====================
断点
==================== */
@仅介质屏幕和（最大宽度：480px）{
.集装箱{
左侧填充：0px；
右边填充：0px；
}
}

选择1
选择2
选择3
选择4
选择5
选择6
选择7
为我添加了最小高度和最大高度

.display-subsection {
  opacity: 1;
  min-height: 10px;
  max-height: 100px; 
}

明亮的非常感谢你的帮助！！