高度自适应不能触发transition的解决方法
2024-08-26 16:44:46
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 大于正常高度就好了。
最新文章
- 深入理解定时器系列——被誉为神器的requestAnimationFrame
- javaScript学习(入门)
- bootstrap的select2校验及不影响原来的格式
- 20145315 《Java程序设计》实验三实验报告
- ws318 配置
- 【分块】bzoj3343: 教主的魔法
- DTD - Elements
- iOS中忽略NSLog打印信息(通过PCH文件中定义DEBUG宏解决)
- Hacker News网站的文章排名算法工作原理
- OSGi.NET 学习笔记
- ps-色彩饱和度的设计
- Promise小书(长文)
- swust oj 987
- 新闻API接口
- QAC静态测试配置及使用教程
- EL表达式jsp页面double小数点后保留两位
- 【python小练】0002
- 五笔xu
- 在linux上执行.net Console apps
- 1001 A+B