跳过主要内容

选择器

返回值:函数


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

对于组件来说这非常有用,因为你可以为该组件的主要容器元素创建一个作用域选择器,然后使用它来选择子元素。它的功能类似于在该元素上调用.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()返回的是可复用的选择器函数,而不是当前选择的结果。