(4)前端好好玩用 GSAP 做一個特效 - 選取目標

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
上一篇我們認識到了基本的動畫設定與語法，接下來這一篇將會針對選取目標來介紹。

前言

上一篇我們認識到了基本的動畫設定與語法，接下來這一篇將會針對選取目標來介紹。

選取目標

前面章節介紹到了以下這種選取方式

1
gsap.to('#box', { x: 100, duration: 3 })

其實這種選取方式與 document.querySelector() 是一樣的，因此不論是 ID 或是 class 都是可以的

1
gsap.to('.box', { x: 100, duration: 3 })

那麼剛剛有提到選取方式類似於 document.querySelector()，所以你也真的可以用 document.querySelector() 方式來選取

1
2
const box = document.querySelector('#box')
gsap.to(box, { x: 100, duration: 3 })

當然也可以做一些比較複雜的 CSS 選取方式

1
gsap.to('div.box', { x: 100, duration: 3 })

如果想選取多個目標的話，也是可以使用 document.querySelectorAll() 來選取

1
2
const boxes = document.querySelectorAll('.box')
gsap.to(boxes, { x: 100, duration: 3 })

當然如果你是不同的 className 也是可以的，只是會變成改傳入陣列的方式

1
gsap.to(['.box1', '.box2'], { x: 100, duration: 3 })

透過上面範例我們可以看到 GSAP 的選取方式與 CSS 選取方式是一樣的，因此你可以使用任何 CSS 選取方式來選取目標，當然也可以使用 document.querySelector() 或是 document.querySelectorAll() 來選取，完全取決於你的喜好、需求．

那麼這一篇就先到這邊囉。