高度自适应不能触发transition的解决方法
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 大于正常高度就好了。
高度自适应不能触发transition的解决方法的更多相关文章
- css浮动中避免包含元素高度为0的4种解决方法
问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both (W3C推荐方法,兼容性较 ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- webkit内核下的mouseup后mousemove自动触发问题及解决方法
如题,就以chrome为代表举例说明遇到mousemove的问题. 为body分别绑定onmousedown.onmousemove.onmouseup,并为触发时打印至控制台.代码如下(同学不要忘记 ...
- ViewPager不能高度自适应?height=wrap_content 无效解决办法
ViewPager用的很多,主要用啦展示广告条.可是高度却不能自适应内容,总是会占满全屏,即使设置android:height="wrap_content"也是没有用的.. 解决办 ...
- (总结)Nginx 502 Bad Gateway错误触发条件与解决方法
一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.以下是从Google搜集整理的一些Nginx 502错误的排查方法,供参考: Nginx 502 ...
- input的onchange事件实际触发条件与解决方法
input中onchange事件已经属于元老级别了,并且现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征. 触发onchang ...
- UITableView cell 半透明效果,改变cell高度时背景不闪的解决方法
如果直接指定cell.backgroundColor = = [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 ...
- Quartz.NET 前一次任务未执行完成时不触发下次的解决方法
如图所示,在Job 上 加 [DisallowConcurrentExecution] 特性
- CSS兼容IE Firefox问题与解决方法
一.双边距问题浮动元素的外边距会加倍,但与第一个浮动元素相邻的其他浮动元素外边距不会加倍.解决方法:在此浮动元素增加样式 display:inline; 二.图片产生的间隙父元素直接包含<im ...
随机推荐
- Inside The C++ Object Model(五)
============================================================================5-0. 一般而言,class 的data me ...
- Android Framework源码反编译
部分设备crash在Framework代码,但又和开源代码对应不上,这时需要拉取设备里面的Framework并反编译源代码排查问题. 1.获取Framework文件: adb pull /system ...
- Axure RP 9 Beta 开放下载(更新激活密钥和汉化包)
2018年9月9号,7月9号来厦门入职,已经两个月了.这两个月的生活状态真心不好,一方面工作很忙(刚工作是这样?),虽然工资还可以,但总感觉性价比很低,自已对这份工作不够热爱也许.另一方面,来到新城市 ...
- selenium 操作过程中,元素标红高亮的两种实现方式
在使用selenium时,动作元素标红高亮,在定位问题时相当好用,有以下二种方法可以实现 一.使用js将元素属性修改 这也是网上大部分的实现方式,但有时候会有点小问题,代码如下: 只写其实某一段函数 ...
- bootstrap滚动监视原理实现
最近在公司实习,刚好写了一个静态的网页,用到了滚动监视,就自己写了个监视,话不多说直接进入正题 $(function () { var $root = $("html,body") ...
- linux 安装配置nexus以及maven私服应用
---------------------nexus---------------------- 1.编辑nexus脚本, 配置 RUN_AS_USER 参数vi /usr/local/src/nex ...
- linux的基本操作(文本编辑工具vim)
文本编辑工具vim * 命令模式:在一般模式下,输入”:”或者”/”即可进入命令模式.在该模式下,你可以搜索某个字符或者字符串,也可以保存.替换.退出.显示行号等等. 下面笔者教你如何在一个空白文档中 ...
- Docker win10安装
因为虚拟机还没装好,所以现在win10上安装Docker 1.首先下载Docker Toolbox,因为Docker for windows需要win10专业版或者其他64位版本,我的系统虽然也是wi ...
- PHP面试大全 基础篇100道问题
2017年3月7日14:23:21 其实计划很久但是移植没时间去收集和处理弄成一个完整的文件 SVN地址: https://git.oschina.net/zxadmin/live_z 目前基础部分更 ...
- 1.7Oob 方法重载和成员变量,局部变量,构造方法
1:方法调用,如果值有参方法,必须传递实际参数. 2:方法定义了多少个参数,传递的实际参数就 必须有多少个, 方法的作用:1:描述某个类的作用,2:软件的复用 这个复用率低,作用小,价值很低: 3: