您的位置：首页 > Web前端 > CSS

css高度从0到auto的transition动画

2017-11-02 10:59 561 查看

如题，想实现css高度从0到auto的transition动画，发现直接写没有效果。查了一下，发现可以用max-height解决，代码如下。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.container{
line-height: 30px;
text-align: center;
width: 100px;
position: relative;
}
.container:hover .sub{
max-height: 300px;
}
.sub{
position: absolute;
width: 100%;
transition: max-height .5s ease;
max-height: 0;
top: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
移过来
<ul class="sub">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
<li>测试5</li>
<li>测试6</li>
<li>测试7</li>
<li>测试8</li>
</ul>
</div>
</body>
</html>

当然用max-height还得加上overflow:hidden。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 动画 auto css3

相关文章推荐

新的分享

章节导航