Flip‑JS：优雅处理元素结构变化动画
🎬 介绍
Flip‑JS 是一款基于经典 FLIP 动画思想（First, Last, Invert, Play）来优雅处理元素结构与样式变化的轻量级库。它支持 DOM 元素的重新排列、尺寸变化、样式过渡等场景动画，确保变换过程自然流畅。目前不依赖大型动画框架，仅通过原生 API 实现动态效果。
思想核心：FLIP 动画
FLIP 技术原理四步：
- First — 记录元素初始状态（位置、样式等）
- Last — DOM 结构或样式发生变化
- Invert — 计算两者差值，设置逆向变换
- Play — 执行动画，由逆向变换过渡到正常
GSAP 等库也采用该模式，确保性能和视觉连续性 ([terrill.ca][1], [gsap.com][2])。
安装 & 引入
npm install fan-flip-js
在项目中引用并初始化：
import { Flip } from 'fan-flip-js';
使用说明
初始化实例
const flip = new Flip(el, animateOptionsOrDuration, otherStyleKeys);
el: 单个元素、数组或 NodeList；animateOptionsOrDuration: 数字（表示 duration），或配置对象（包括duration,easing,delay）；otherStyleKeys: 希望添加动画控制的 CSS 属性，如'width','backgroundColor'。（注意：属性需支持 transition，不支持例如display、渐变等）
动画过程
- 调用构造函数创建实例；
- 自由变更 DOM 结构与样式；
- 执行
flip.animate()触发动画。
示例
const flip = new Flip(lis, 1000, ['backgroundColor', 'width']);
// 随机排列 & 修改样式
lis.sort(() => Math.random() - 0.5).forEach(item => {
item.style.backgroundColor = getRandomColor();
item.style.width = getRandomNumber(100, 300) + 'px';
ul.appendChild(item);
});
// 播放动画
await flip.animate();
console.log('Animation finished');
flip.destroy();
animate API
animate(animateOption?: IAnimateOption): Promise<void>;
animate(callback: () => void, animateOption?: IAnimateOption): void;
可传入配置对象或结束回调，灵活执行。
pause/resume 与销毁
flip.pause(); // 暂停
flip.resume(); // 恢复
flip.destroy(); // 清理实例，释放资源
销毁后可再次创建，防止内存泄漏。
实践案例
栗子：随机排列列表项
const btn = document.querySelector('button');
const ul = document.querySelector('ul');
let lis = Array.from(ul.children);
btn.addEventListener('click', async () => {
const flip = new Flip(lis, 800, ['width', 'backgroundColor']);
lis = lis.sort(() => Math.random() - 0.5);
lis.forEach(item => {
item.style.width = `${100 + Math.random() * 200}px`;
item.style.backgroundColor = `#${Math.random().toString(16).slice(2, 8)}`;
ul.appendChild(item);
});
await flip.animate({ easing: 'ease-in-out' });
console.log('✅ 动画完成');
flip.destroy();
});
效果：点击按钮后，元素将动画方式重排、变色、缩放。
技术解析
- 性能优越：FLIP 技术通过 transform + opacity 控制，极大优化重排和重绘开销 ([github.com][3])。
- 样式统一控制：支持 transform + 自定义其他 style key，使尺寸、颜色等变化同步动画过渡。
- Promise + 回调混合 API：适应不同异步场景。
总结
Fan‑flip‑js 提供了一个 轻量级、无依赖、直观使用 的 FLIP 动画方案，适合处理如下需求：
- DOM 结构频繁变动场景（元素添加、删除、重排）
- 样式变化（尺寸、颜色等）同步过渡
- 需要高性能体验和便捷 API
它与 GSAP 等大型动画框架异曲同工，但更适合小体量项目，无需引入重依赖。建议试用，并根据 UI 逻辑酌情 destroy 实例，确保生命周期管理。