Auto值的CSS3 Transition解决方案
浏览数：45 /
时间：2015年06月09日
今天在准备明天的课堂案例时，遇到了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值以取得最佳的效果。
That‘s all，Thank you.
---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
