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代替

Answer 2

刚好看到

使用 CSS transitions - CSS（层叠样式表） | MDN

哪些 CSS 属性可以动画?
auto 值常常较复杂，规范指出不要在它上动画。一些用户代理，比如基于 Gecko 的，遵循这点；一些，比如基于 WebKit的，没有这么严格限制。在 auto 上动画结果可能不可预期，这取决于浏览器及其版本，应当避免使用。