Auto值的CSS3 Transition解决方案

时间：2014-04-11 17:13:20 阅读：1080 评论：0 收藏：0 [点我收藏+]

今天在准备明天的课堂案例时，遇到了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前端开发技术，分享网页相关资源。
---------------------------------------------------------------

原文：http://blog.csdn.net/whqet/article/details/23378641

踩

(0)

评论一句话评论（0）

分享档案

更多>