[CSSチュートリアル]CSS動的高さ遷移のアニメーション効果の実装の

この質問はナゲッツのメッセージから来たもので、友人から以下の私のコードの高さ遷移アニメーションがなぜ機能しないのかと尋ねられたものです。

疑似コードは以下のようなものです。

{
    height: unset;
    transition: all 0.3s linear;
    will-change: height;
 
    &.up {
        height: 0;
    }
    &.down {
        height: unset;
    }
}

これを実際のDemoに落とし込むと、次のようになります（本質的なアイデアは、要素に .up と {コード {コード クラスで、展開と終了をアニメーションで行うようにします)。

ん？おかしいな、明らかに与えている

.down