如何在 React 中使用 gsap 动画化伪类？

Question

import React, { Component, useEffect } from 'react';
import { gsap } from 'gsap';
import { CSSPlugin, CSSRulePlugin } from 'gsap/all';

gsap.registerPlugin(CSSPlugin, CSSRulePlugin);

const mouseOverHandler = (event: any) => {
    const rule = CSSRulePlugin.getRule(`${event.target}::after`);
    gsap.to(rule, {
        duration: 2,
        cssRule: {
            xPercent: 100
        }
    })
}

const Navbar = () => {
    return (
        <ul className="header__links">
            <li className="header__link" onMouseOver={mouseOverHandler}>link</li>
        </ul>
    )
}

export default Navbar;

我将在 may react 项目中使用 gsap 为列表项的伪类设置动画。但结果我接受了这个错误

DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

GSAP target undefined not found. https://greensock.com

有人可以帮助我吗？请

我尝试使用事件处理程序和动画

event.target