Height transition
时间:2022-07-24
本文章向大家介绍Height transition,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
鼠标hover
时使一个未知高度元素的高度从0
过渡到auto
。
本实现的思路是:
- 通过
js
提前将元素的scrollHeight
保存在CSS变量--max-height
中。 - 元素
hover
时max-height直接
使用--max-height
保存的值。
html
<div class="trigger">
恭喜发财
<div class="el">红包拿来</div>
</div>
css
.el {
transition: max-height 0.5s;
overflow: hidden;
max-height: 0;
}
.trigger:hover > .el {
max-height: var(--max-height);
}
js
let el = document.querySelector('.el');
let height = el.scrollHeight;
el.style.setProperty('--max-height', height + 'px');
代码详解
-transition:max-height:0.5s
使用默认的ease
时间函数在0.5
秒内过渡max-height
的值。
-overflow:hidden
防止超出max-height
范围内的子元素内容溢出容器。
-max-height:0
指定元素初始的最大高度为0
。
-.target:hover> .el
指定当hover
父级元素时,使其子节点.el
的max-height
为CSS变量--max-height
的值。
-el.scrollHeight
指元素包含滚动部分的高度,它将根据元素的内容动态变化。
-el.style.setProperty(...)
设置--max-height
CSS变量的值为元素的scrollHeight
。
以下两点需要注意:
- 由于改变高度的CSS动画会触发页面重排(
reflow
),所以当需要改变高度的元素内包含大量元素时,会造成动画效果滞后。 -
CSS变量
已经得到大部分主流浏览器的支持,但是IE
除外。兼容性如下:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- keras的siamese(孪生网络)实现案例
- 浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
- Python数据可视化图实现过程详解
- Python matplotlib 绘制双Y轴曲线图的示例代码
- keras 读取多标签图像数据方式
- python新手学习可变和不可变对象
- COS Android SDK DEMO搭建实践
- 利用COS多版本避免文件误删除
- kube-prometheus添加target
- 深入浅析python 中的self和cls的区别
- php中如何执行linux命令详解
- Linux下 php7安装redis的方法
- 基于Keras中Conv1D和Conv2D的区别说明
- python中有帮助函数吗
- 浅谈Python中的生成器和迭代器