css3 transition动画宽高自适应问题
2018-10-28 本文已影响0人
凌晨四点打铁匠
背景
今天在工作的时候用了css3的transition做了一个简单的height变化的动画，就是一个下拉框收起与展开的动画。但是由于下拉框的高度自适应，在设置动画的时候，不起作用，只有在设置height为固定值的时候，才会有动画。
transition动画
因为列表高度不确定，所以为了能让动画做到自适应高度，所以属性应该设max-height，我们可以根据项目以及页面的美观度，来设置max-height的最大值。同时有一个问题，运动的时间对应的是设置的max-height，所以如果显示的列表高度太小，动画会非常快，这个也需要根据项目自己调整。
示例代码如下
<style>
.box {
width: 200px;
height: 40px;
background: gold;
}
.box:hover .list {
max-height: 300px;
}
.list {
width: 100%;
max-height: 0;
list-style: none;
transition: max-height 1s;
overflow: hidden;
}
.list li {
line-height: 30px;
background: green;
margin: 10px 0;
}
</style>
<body>
<div class="box">
<h3>水果列表</h3>
<ul class="list">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
<li>火龙果</li>
</ul>
</div>
</body>
