トグルリスト（アコーディオン）に transition: height が効かない時の裏技

前置き（transition による遷移アニメーション）

アコーディオンにアニメーションをつけたいとき、
cssのtransitionを使えば簡単にアニメーションをつけられます。

scss

.toggle-block {
	overfllow: hidden;
	height: 0;
	transition: height 0.3s

	&.is-active {
		height: 300px;
	}
}

上記のtoggle-blockにis-activeを着脱すれば、
0.3sかけて height が伸び縮みしてくれます。

transition設定してもアニメーションにならないケース

scss

.toggle-block {
	overfllow: hidden;
	height: 0;
	transition: height 0.3s

	&.is-active {
		height: fit-content;
	}
}

これの場合はうまくいきません。
transitionが効くのは「数値同士」の変化のみだからです。

• OK：　0 ←→ 500px　／　0 ←→ 100vh
• NG：　fit-content ←→ 0　／　auto ←→ 100vh

高さが不定のボックスには使えないのでしょうか？

高さ不定のトグルボックスに transition を効かせる

heightではなくmax-heightにすればうまくいきます。

scss

.toggle-block {
	overfllow: hidden;
	max-height: 0;
	transition: max-height 0.3s

	&.is-active {
		max-height: 100vh;
	}
}

これで数値同士の変化になったので、transitionが効きます。
active時のheightが不定でもこれで安心です。

※active時のmax-heightはわかってる範囲で最小にします。
　画面をはみ出る可能性がちょっとでもあれば 100vh にするしかないと思います。

【おまけ】アニメーションは jQuery でよくないか？

jQueryで書く方が色々できるし便利やと思います。
しかし、jsの使用は可能な限り最低限に抑えたいです。

クラスの付け替え(.is-activeなど）だけとかにしたい。

同じ見た目のサイトなら、より多くの人にコードが読めて、メンテナンスもしやすい方が良いと考えるからです。