不定高元素动画实现方案（下）
前情最近小程序接了一个需求，需要实现一个列表，列表可展开收起，展开收起需要有一个动画效果，而列表个数不定且每项内容高度也不固定，所以是一个不定高的收起展开效果，于是特意抽时间尝试了一些动画实现方案，特此记录
通过js+css变量来实现
实现思路是js获取要实现动画元素的高度，再通过css变量把高度设置在元素上，当hover的时候，把元素的高度设为css变量
关键代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
header
<ulid="list" >
<li>scale111111111</li>
<li>scale2222222222</li>
<li>scale333333333</li>
<li>scale444444444</li>
</ul>
</body>
</html>*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
overflow: hidden;
}
.header{
width: 100%;
height: 48px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.list{
background-color: green;
height: var(--height)
}document.addEventListener('DOMContentLoaded', () => {
var list = document.querySelector('#list')
list.style.setProperty('--height', list.scrollHeight + 'px')
})演示地址：https://jsbin.com/besufuyihe/edit?html,css,js,output
注意：
css动画使用比js要简单，同时性能上也会有优势，所以能用css实现的就尽量用css实现，此方式兼容性棒，JS干预也不是特别多
通过js+Flip动画来实现
FLIP是一种高性能动画技术，常用于实现复杂动画，代表四个步骤：
[*]First（初始）：记录元素的初始状态
[*]Last（最终）：设置元素到最终状态并记录
[*]Invert（反转）：计算差异并将元素恢复到初始状态
[*]Play（播放）：应用过渡效果并播放动画
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
header
<ul >
<li>Flip111111111</li>
<li>Flip2222222222</li>
<li>Flip333333333</li>
<li>Flip444444444</li>
</ul>
</body>
</html>*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 48px;
overflow: hidden;
}
.header{
width: 100%;
height: 48px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.list{
background-color: green;
}document.addEventListener('DOMContentLoaded', () => {
// 获取容器元素
const containero = document.querySelector('#container')
// 鼠标进入容器时的FLIP动画实现
containero.addEventListener('mouseenter', () => {
// 第一步(F-First)：记录初始状态(隐式的，初始高度为48px)
// 第二步(L-Last)：设置元素为最终状态，获取自然高度
containero.style.height = 'auto';
const conh = containero.scrollHeight; // 获取内容实际高度
// 第三步(I-Invert)：将元素恢复到初始状态
containero.style.height = '48px';
containero.offsetHeight; // 触发重绘，确保样式应用
// 第四步(P-Play)：添加过渡效果并播放动画到最终状态
containero.style.transition = 'height .4s';
containero.style.height = conh + 'px';
})
// 鼠标离开时恢复初始高度
containero.addEventListener('mouseleave', () => {
containero.style.height = '48px';
})
})演示地址：https://jsbin.com/barihazasi/edit?html,css,js,output
注意：
Flip用于实现一些复杂动画是非常常见的方式，动画还是使用css3的transition,还是遵守一个原则，能用css实现动画的还是用css来做
纯js来实现
早期js实现动画都是使用setInterval/setTimeout来实现动画效果的，现在如果要用js来实现动画可以使用requestAnimationFrame来代替，来看一下他们的对比
1. 触发时机与刷新频率
[*]setTimeout/setInterval：
[*]按照指定的时间间隔（毫秒）触发回调函数
[*]时间间隔是近似值，实际执行会受 JavaScript 线程繁忙程度影响
[*]即使页面处于后台或隐藏状态，仍可能继续执行
[*]刷新频率固定，无法与显示器刷新率同步
[*]requestAnimationFrame：
[*]由浏览器决定执行时机，通常与显示器刷新率同步（60Hz 屏幕约每 16ms 执行一次）
[*]自动调整执行频率以匹配设备性能
[*]当页面处于后台或标签页隐藏时，会暂停执行以节省资源
[*]执行时机在浏览器重绘之前，确保动画平滑
2. 性能表现
[*]setTimeout/setInterval：
[*]可能导致动画卡顿或跳帧，因为无法与浏览器渲染周期对齐
[*]多个定时器同时运行时可能导致性能问题
[*]高频率定时器 (如 10ms) 可能导致浏览器过度渲染，消耗不必要的资源
[*]requestAnimationFrame：
[*]浏览器会优化动画执行，确保流畅性
[*]自动调整帧率，在性能不足时降低频率
[*]不会在页面不可见时执行，节省 CPU/GPU 资源
关键代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
header
<ul >
<li>js111111111</li>
<li>js2222222222</li>
<li>js333333333</li>
<li>js444444444</li>
</ul>
</body>
</html>*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 48px;
overflow: hidden;
}
.header{
width: 100%;
height: 48px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.list{
background-color: green;
}document.addEventListener('DOMContentLoaded', () => {const containero = document.querySelector('#container')// 初始高度为48px（与CSS中定义的一致）const initH = 48;// 获取容器完全展开时的高度const conh = containero.scrollHeight;// 每一帧增加/减少的高度像素const step = 5;// 标记动画是否正在运行，防止多次触发let isAnimating = false; containero.addEventListener('mouseenter', () => { // 如果已经在动画中，则不重新开始 if (isAnimating) return; // 获取当前高度作为起点 let currentHeight = parseInt(containero.offsetHeight); isAnimating = true; const expand = function () { // 增加高度 currentHeight += step; // 检查是否达到目标高度 if (currentHeight >= conh) { containero.style.height = conh + 'px'; isAnimating = false; return; } // 设置新高度并继续动画 containero.style.height = currentHeight + 'px'; requestAnimationFrame(expand); } // 开始展开动画 requestAnimationFrame(expand);})// 鼠标离开时恢复初始高度containero.addEventListener('mouseleave', () => { // 如果已经在动画中，则不重新开始 if (isAnimating) return; // 获取当前高度作为起点 let currentHeight = parseInt(containero.offsetHeight); isAnimating = true; const collapse = function () { // 减少高度 currentHeight -= step; // 检查是否达到初始高度 if (currentHeight 过来提前占个楼 谢谢楼主提供！ 谢谢分享，辛苦了 新版吗？好像是停更了吧。
页:
[1]