使用 GSAP CSSRulePlugin 選取虛擬元素 (pseudo-element)

之前為了幫公司網站插入動畫，稍微接觸了 GSAP 這款動畫函式庫。其中，為了製作「畫底線」的效果，因此使用了虛擬元素，替文字增加了底線，作法如下：

.text-underline {
  position: relative;
}
.text-underline::after {
  content: "";
  position: absolute;
  top: 120%;
  left: 0px;
  width: 0;
  border-top: 3px solid rgb(0, 0, 0);
}

要做出「畫線」的效果，可以透過將 width: 0; 變成 width: 100%; 達成。

var tl = new TimelineMax();
tl.to(".text-underline::after", {
  duration: 0.5,
  width:"100%"
} );

然而，GSAP 的核心，是無法選取虛擬元素 (pseudo-element) 作為選擇器的。因此上面的 GSAP 語法並不會發生任何改變，必須借助 CSSRulePlugin 來達成。

在引入 CSSRulePlugin 後，就能夠透過 CSSRulePlugin 這個方法，從原本的 CSS 中，取得相對應的選擇器。

為什麼特別強調「從原本的 CSS 中」呢？因為之前在實作時踩過雷，怎麼改就是選不到用來畫線的虛擬元素，後來才發現選擇器沒有做到完全比對。CSSRulePlugin 的概念，是從 CSS 檔案中讀取指定的選擇器並加以操作，一旦選擇器不存在於 CSS 檔案中便無法使用。

var tl = new TimelineMax();
var rule = CSSRulePlugin.getRule(".text-underline::after"); // 必須與 CSS 檔案中的選擇器一致
tl.to( rule, {
  duration: 0.5,
  cssRule: {
    width: "100%"
  }
} ); 

呈現出來的效果可以參考我的 CodePen。

GSAP 是一款強大的動畫函式庫，我認為在時間軸這一塊，GSAP 的語法還蠻直觀的，所以便開始使用。但也因為它的強大，有些前輩有提到需要考慮效能的問題。

參考資料

• GSAP 官方技術文件：CSSRulePlugin（英文）