Bootstrapのcollapseでtransitionがカクつく問題の解決法

Bootstrapのcollapseコンポーネントを使用する際に、対象要素にpaddingがあると、アニメーション中にカクつきが発生することがあります。

これは、transitionがpaddingにより期待通りに動作しないためです。解決策として、対象要素を新たなラッパー要素で囲み、そのラッパー要素にcollapseを指定します。

この方法で、内側の要素にpaddingを適用しても、外側のラッパー要素がスムーズにcollapseし、カクつきを防ぐことができます。