Bootstrapのcollapseの子要素にtransitionが効かない問題の解決方法

Bootstrapのcollapseコンポーネントは非常に便利ですが、子要素にtransitionを適用しようとすると問題が発生することがあります。これは、collapseが表示されていない時、要素がdisplay: noneになってしまうためです。

この問題を解決するには、次のCSSを追加します：

.collapse:not(.show) {
    display: block;
}

このコードは、collapseが展開されていない状態でも、要素がdisplay: noneではなく、display: blockになるようにします。これにより、子要素にtransitionが正しく適用されるようになります。