选择器
返回值:函数
返回一个选择器函数它的作用域限定在特定的元素上,意味着它只会查找该元素的子元素作为该元素的一部分。
对于组件来说这非常有用,因为你可以为该组件的主要容器元素创建一个作用域选择器,然后使用它来选择子元素。它的功能类似于在该元素上调用.querySelectorAll()
而非在整个文档上调用,但有一些额外的优势:
- 它返回的是一个数组而不是NodeList,因此你可以访问像
.filter()
和.map()
. - 这样的便利数组方法。React 的 ref或者Angular ElementRef设置为gsap.utils.selector()。之后当你使用生成的函数时,它会自动检查
.current
/.nativeElement
,以防自创建以来 ref 已经被重新渲染了。
// 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() 更加整洁清晰,并且可以反复使用它选择类名(但仅限于该组件内)。
参数
- scope(作用域): [Element | String | Object] (可选)- 将选择器文本的作用域限制到该元素(或选择器文本或 React Ref 或 Angular ElementRef),就像调用
scopeElement.querySelectorAll([selector-text])
而不是document.querySelectorAll()
。换句话说,它只会返回此作用域元素的子级元素。记住,gsap.utils.selector()
返回的是可复用的选择器函数,而不是当前选择的结果。