1. 前言
在我们不能确定一个元素的高度的时候，要使用transition过渡，是不会触发的，比如一个p标签 内容行数不固定 我们可能就要初始 height: 0 ; 过渡到 height: auto ; 写完发现并不能实现 。
可过渡的样式
不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果
Vstart = 开始值; Vend = 结束值; Vres = 中间值; p = 过渡函数的输出值 Vres = (1 - p) * Vstart + p * Vend 当Vres具有有效值时，则该CSS样式可过渡 2. 解决方法（一个实例） 通过设置max-height 来实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div{
max-height: 0;
transition: .8s;
overflow: hidden;
border: 1px solid #000;
}
#btn{
width: 50px;
text-align: center;
margin: 60px;
line-height: 30px;
border: 2px solid #000;
cursor: pointer;
}
</style>
</head>
<body>
<div id="btn">
点击我
</div>
<div id="div">
asd <br/>
asd <br/>
asd <br/>
asd <br/>
asd <br/>
</div>
<script>
btn.onclick = function(){
if(div.on){
div.style.maxHeight = ‘0px‘;
div.on = false;
}else{
div.style.maxHeight = ‘300px‘;
div.on = true;
}
}
</script>
</body>
</html>
因为max-height是根据内容来撑开高度的，只要max-height 大于正常高度就好了。
原文地址：https://www.cnblogs.com/maopixin/p/8669142.html
时间： 2024-11-09 10:14:12