Auto值的CSS3 Transition解决方案

今天在准备明天的课堂案例时，遇到了Auto值的Transition Bug问题，各种搜索之后得到解决方案，备忘如下。

问题描述

当我们需要给width、height等值设置Transition（过渡）时，如果我们的起始状态（或结束状态）为auto时，Transition会失效。

情境重现

例如，在该案例中，二级菜单数量不定，因此ul.sub高度不定，我们需要为其赋予auto值(根据内容高度决定其高度)，这时的Transition（过渡）就不灵了。

ul.menu li .sub{
    height: 0;
    overflow: hidden;
    transition: all 1s;
}
ul.menu li:hover .sub{
    height:auto;
}

hover状态会起效，但是Transition失灵。

解决方案一

这里的解决方案是我们需要尽可能的绕过auto值，这里我们可以通过使用max-height绕过 height:auto值。当然，width可以使用max-width。

ul.menu li .sub{
    max-height: 0;
    overflow: hidden;
    transition: all 1s;
}
ul.menu li:hover .sub{
    max-height: 200px;
}

注意事项

1.我们需要确保max-height的值超过所有项中的最大值，也就是说一定要罩得住。

2.我们这里的transiton是从0到200px之间过渡，需要赋予合适的过渡持续时间、合理的max-height值以取得最佳的效果。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------