# 目标元素 targets

URL: https://caijiao.org/animejs/2-basics/1-targets
Source: docs/animejs/2-basics/1-targets.md
Description: 本节介绍 Anime.js 中 targets 的使用方法，包括选择器、DOM 节点、NodeList、数组等不同形式的目标设置方式，并讲解如何同时对多个元素进行动画操作。

在 Anime.js 中，`targets` 是动画的作用目标，用于指定你希望哪个元素或对象参与动画。它是所有动画配置的基础参数之一。

## 支持的 target 类型

Anime.js 支持多种形式的 `targets`：

### 1. CSS 选择器字符串

```js
anime({
  targets: ".box",
  translateX: 250,
});
```

会选中页面中所有 class 为 `.box` 的元素。

### 2. 单个 DOM 元素

```js
const el = document.querySelector("#myBox");
anime({
  targets: el,
  scale: 2,
});
```

适合需要精确控制的场景。

### 3. NodeList 或 HTMLCollection

```js
const items = document.querySelectorAll(".item");
anime({
  targets: items,
  opacity: 0.5,
});
```

多个元素可同时参与动画，Anime.js 会自动对它们进行遍历。

### 4. JavaScript 对象

```js
const obj = { x: 0 };
anime({
  targets: obj,
  x: 100,
  update: () => console.log(obj.x),
});
```

这适用于数值控制类的场景，比如 Canvas 动画或数值计算。

### 5. 对象数组

```js
anime({
  targets: [{ x: 0 }, { x: 100 }],
  x: 200,
  update: (anim) => {
    console.log(anim.animations[0].currentValue);
  },
});
```

可用于对多个非 DOM 对象执行统一动画。

## 多元素动画的并发与顺序

默认情况下，多个元素的动画是**并发**执行的。如果希望顺序动画，可以搭配 `delay` 或使用 `anime.stagger`：

```js
anime({
  targets: ".item",
  translateX: 200,
  delay: anime.stagger(100), // 每个元素延迟 100ms
});
```

## 示例演示

[在线代码演示](/animejs/demos/1.html)

## 小结

`targets` 是 Anime.js 中最灵活也最关键的参数之一。它不仅支持标准的选择器，还允许使用对象、数组等形式，为各种动画需求提供了极高的自由度。