css高度上的过渡动画为什么不生效

Question

li{
    .subnav{
        display: flex;
        flex-direction: column;
        transition:height 2s;//这个高度什么不生效
        padding: 10px 0;
        height: 0;
        overflow: hidden;
    }
}

#navmenu li:hover .subnav{
    height: auto;
}

Answer 1

因为heigth:auto 不是具体值，无法触发过渡。
transition 必须满足是具体值，比如 opacity:0->opacity:1。
可以将height:auto用max-height：xxx代替