按需加载CSS动画库的核心是动态插入标签，仅在需要时加载对应动画样式文件。具体包括：1. 判断去重后插入link；2. 按类名映射URL智能加载；3. 通过onload或Promise确保样式就绪再添加类；4. 生产环境推荐构建时提取，避免运行时竞态。
按需加载 CSS 动画库，核心思路是**只在需要时动态插入对应动画的样式表（）**，避免全局引入大量未使用的动画类，减少初始体积和渲染阻塞。关键在于控制 的创建、插入与去重。
1. 判断并插入指定动画 CSS 文件
通过 JavaScript 动态创建 标签，设置 href 指向目标动画库的子模块（如 animate.css 的单个动画文件，或你拆分好的 fade.css、slide.css 等）：
function loadAnimationCSS(url) {
// 防止重复加载
if (document.querySelector(`link[href="${url}"]`)) return;
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
link.onload = () => console.log(`Loaded: ${url}`);
link.onerror = () => console.warn(`Failed to load: ${url}`);
// 插入到 head 末尾（推荐），或指定位置
document.head.appendChild(link);
}
调用示例：loadAnimationCSS('/css/animations/fade-in.css');
2. 按动画类名智能加载（进阶）
若使用像 animate.css 这类提供大量预设类（如 animate__fadeIn、animate__bounce）的库，可封装一个「按类名触发加载」的函数：
立即学习“前端免费学习笔记（深入）”；
- 维护一个映射表，如
{ 'fadeIn': '/node_modules/animate.css/animate.css#fadeIn' }（注意：原 animate.css 不支持片段加载，需自行拆包或用构建工具提取） - 更实用的方式：提前将常用动画拆成独立 CSS 文件（如
animate-fade.css、animate-bounce.css），再按需加载 - 加载后，直接给元素添加对应 class 即可生效（确保 DOM 已存在且样式已就绪）
3. 加载完成后再触发动画（避免 FOUC 或失效）
CSS 文件异步加载，类名添加必须等样式就绪。可靠做法是利用 link.onload 回调或 Promise 封装：
function loadAndApply(className, element) {
const url = getAnimationCSSUrl(className); // 自定义映射逻辑
return new Promise((resolve) => {
const existing = document.querySelector(`link[href="${url}"]`);
if (existing && existing.sheet?.cssRules?.length) {
resolve();
return;
}
loadAnimationCSS(url);
const link = document.querySelector(`link[href="${url}"]`);
link.onload = () => resolve();
}).then(() => {
element.classList.add(className);
});
}
// 使用
loadAndApply('animate__fadeIn', myEl);
4. 构建时配合实现真正按需（推荐长期方案）
纯运行时动态 插入适合小规模或原型开发；生产环境建议结合构建工具：
- 用 PostCSS 或 Webpack 插件分析 JS 中引用的动画类名，自动提取对应 CSS 规则
- 将
animate.css拆为单个动画的 SCSS/LESS 文件，按需@import - 使用
unplugin-auto-import+unplugin-vue-components类似思路，为动画类做自动导入（需定制）
这样既能享受按需，又无运行时加载延迟和竞态问题。
不复杂但容易忽略：务必校验 link.sheet 是否就绪，避免在样式未解析完成时操作 DOM 类名导致动画不触发。
