# 常见错误排查

URL: https://caijiao.org/animejs/7-tips/3-errors
Source: docs/animejs/7-tips/3-errors.md
Description: 本节介绍 Anime.js 动画开发中常见的错误类型及排查方法，帮助你快速定位问题并有效解决。

在使用 Anime.js 开发动画时，可能会遇到一些常见问题。了解这些错误及其排查方法，可以大幅提升开发效率。

## 1. 动画不执行或无效果

- **原因**：
  - 目标元素选择器错误，找不到对应元素。
  - 动画属性设置错误，如无效的 CSS 属性或值。
  - 动画时间设置为 0 或被意外暂停。
- **排查建议**：
  - 检查目标选择器是否正确。
  - 在控制台输出目标元素确认是否存在。
  - 确认动画属性和数值是否正确。
  - 检查动画是否被暂停或提前结束。

## 2. 报错 `Uncaught SyntaxError` 或变量重复声明

- **原因**：
  - 在同一作用域多次用 `const` 或 `let` 声明同名变量。
  - 脚本被重复加载执行。
- **排查建议**：
  - 使用 `var` 或立即执行函数（IIFE）避免变量污染。
  - 确认脚本只加载执行一次。

## 3. 页面卡顿或动画掉帧

- **原因**：
  - 动画属性导致频繁重排或重绘（如 `width`、`height`、`top` 等）。
  - 同时执行动画数量过多。
  - 缺乏硬件加速支持。
- **排查建议**：
  - 优先使用 `transform` 和 `opacity`。
  - 控制同时运行动画数量。
  - 使用浏览器性能工具定位瓶颈。

## 4. 动画顺序错乱或时间轴问题

- **原因**：
  - 时间轴配置错误，导致动画重叠或延迟。
- **排查建议**：
  - 仔细检查 `timeline` 中的 `offset` 设置。
  - 使用回调函数确认动画执行顺序。

## 5. 动画样式未恢复

- **原因**：
  - 动画结束后样式未重置。
- **排查建议**：
  - 使用 `complete` 回调手动恢复样式。
  - 设置 `fill` 属性或使用 CSS 初始样式。

## 示例：避免变量重复声明错误

```html
<script>
(function() {
  var box = document.querySelector('.box');
  // 动画代码
})();
</script>
````