跳过主要内容

选择器

返回值：函数​

返回一个选择器函数它的作用域限定在特定的元素上，意味着它只会查找该元素的子元素作为该元素的一部分。

对于组件来说这非常有用，因为你可以为该组件的主要容器元素创建一个作用域选择器，然后使用它来选择子元素。它的功能类似于在该元素上调用.querySelectorAll()而非在整个文档上调用，但有一些额外的优势：

// Vanilla
let q = gsap.utils.selector(myElement); // or use selector text like ".class"
let boxes = q(".box"); // finds only elements with the class "box" that are INSIDE myElement
// or plug directly into animations
gsap.to(q(".circle"), { x: 100 });
// React
let el = useRef();
let q = gsap.utils.selector(el);

useEffect(() => {
  // uses el.current.querySelectorAll() internally
  gsap.to(q(".box"), { x: 100 });
}, []);
// Angular
@Component({ ... })
class MyComponent implements OnInit {

  constructor(private el: ElementRef) {
    this.q = gsap.utils.selector(el);
  }

  ngOnInit() {
    // uses this.el.nativeElement.querySelectorAll() internally
    gsap.to(this.q(".box"), { x: 100 });
  }
}
// Vue
{
  mounted() {
    this.$nextTick(() => this.animate());
  },
  methods: {
    animate() {
      let q = gsap.utils.selector(this.$el);

      // uses this.$el.querySelectorAll() internally
      gsap.to(q(".box"), { x: 100 });
    }
  }
}

在 React 中一种常见的做法是为每个你想动画的元素声明一个 ref，但这会使你的代码变得冗长且难以阅读。

加载中...

通过使用作用域选择器，我们只需要使用一个单一的ref。接着我们就可以直接选择其子元素。

加载中...

那为什么不直接使用 document.querySelectorAll(".class")？​

假设你构建了一个组件，它最终在页面上的呈现如下：

<div class="my-component">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

然后你在同一页面中使用了三次这个组件...

<my-component>
<my-component>
<my-component>

这会导致页面呈现效果如下：

<div class="my-component">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="my-component">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="my-component">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

现在想一下，如果你编写了一个如下的动画：当你点击某个单独的组件时，它会动效显示自己的盒子：

myComponent.addEventListener("click", () =>
  gsap.to(".my-component .box", { x: 100, stagger: 0.1 })
);

这将导致整个页面中的盒子都产生动效，而不只是该组件内的盒子。所有整个页面的盒子都会动效，而不是仅在该组件内部的盒子。看到问题了吗？我们需要一种方式让它只作用于指定组件。当然你可以把myComponentRef.current.querySelectorAll(".box")作为 tween 的目标传入，但显然使用已经设定好作用域的 selector() 更加整洁清晰，并且可以反复使用它选择类名（但仅限于该组件内）。

参数​

  1. scope（作用域）: [Element | String | Object] （可选）- 将选择器文本的作用域限制到该元素（或选择器文本或 React Ref 或 Angular ElementRef），就像调用scopeElement.querySelectorAll([selector-text])而不是document.querySelectorAll()。换句话说，它只会返回此作用域元素的子级元素。记住，gsap.utils.selector()返回的是可复用的选择器函数，而不是当前选择的结果。

目录