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值以取得最佳的效果。
That‘s all,Thank you.

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

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

Auto值的CSS3 Transition解决方案,布布扣,bubuko.com

Auto值的CSS3 Transition解决方案

上一篇:编译lua


下一篇:PHP扩展实现的简单MVC框架