事象
BootstrapのCollapseを使用する際、開閉させるコンテンツにpaddingが指定されていると、アニメーションの最後にガクッとした動きが入ってしまう。
See the Pen BootstrapのCollapseがガタつく件 by anchoor (@anchoor) on CodePen.
原因
- Bootstrapでは全要素に
box-sizing:border-box;が指定されている - アニメーションにはpadding/borderを含まない高さ指定
.height(val)が使われている - アニメーションが終了したタイミングで
display: none / block;に切り変わる⇒その際にpadding分だけガタついて見える
対処方法
.collapse な要素に padding がついていなければ良いので
-
.collapseな要素の margin で余白調整を行う -
.collapseに子要素divを追加して余白調整を行う
で対処可能です。後者の方が汎用性が高そうですね。
See the Pen BootstrapのCollapseがガタつく件2 by anchoor (@anchoor) on CodePen.
参考