Блог

Я пытаюсь использовать плагин правил CSS GSAP для таргетинга и анимации псевдо-селектора. Проблема в том, что он не обнаруживает его и не входит GSAP target undefined not found в консоль. Я попытался получить элемент, зарегистрировав его в консоли, но он также не определен.

Вот как я его использую:

 import { gsap } from "gsap"
import { CSSRulePlugin } from "gsap/CSSRulePlugin"

const IndexPage = () => {
  
  useEffect(() => {
    gsap.registerPlugin(CSSRulePlugin);
    const titleRule = CSSRulePlugin.getRule(
      "span.landing__title--span::after"
    )
    // Log titleRule
    console.log(titleRule). // undefined

    const tl = gsap.timeline();
    tl.to(
      titleRule,
      {
        cssRule: {
          scaleY: 0,
          duration: 1
        },
      }
    )
  },[])
  
  return (
    <div>
        <span className="landing__title--span">Hey there</span>
    </div>
  )
}

export default IndexPage
 

Что я делаю не так и как мне это исправить? Заранее спасибо

Наконец-то я нашел причину, по которой это не работало. Когда вы используете CSSRulePlugin, вы должны быть очень конкретны в отношении своих селекторов.

Селектор, который вы используете в getRule (), сильно зависит от селектора, который вы используете в своем CSS (потому что это изменит это конкретное правило).

Если в вашем CSS вы, например, используете landing__title--span::after и ссылаетесь span.landing__title--span::after на getRule (), это не сработает. Селектор в getRule() должен совпадать с селектором в вашем css, потому что это то, что он хочет перезаписать.

Итак, в вашем css, если ваш стиль выглядит так:

 .landing__title--span::after {
  /*Yout styles*/
}

 

Ваш getRule должен быть определен следующим образом:

 const titleRule = CSSRulePlugin.getRule(
  ".landing__title--span::after"
)