无法从“ CSSStyleSheet”读取“ cssRules”属性:无法访问React,GSAP中的规则

问题描述

我正在尝试将GSAP与react一起使用来创建图像展示动画。这是我的代码

  import React,{useRef,useEffect} from 'react';
  import './JumboRight.scss'
  import CSSRulePlugin from "gsap/CSSRulePlugin";
  import { gsap,TimelineLite,Power2 } from "gsap";
  import student from "../../assets/student.webp";
  import {connect} from 'react-redux';
  const JumboRight = (props) =>{

    gsap.registerPlugin(CSSRulePlugin);
    let containerRef = useRef(null);
  
    let heroRef = useRef(null);
    let imageReveal = CSSRulePlugin.getRule(".hero:after")

    const tl = new TimelineLite()
    useEffect(()=> {
      tl.to(containerRef,{
      visibility: "visible"
      }).to(imageReveal,1.4,{width: "0%",ease: Power2.easeInOut})
    })
    //remaining code

我遇到以下错误

Failed to read the 'cssRules' property from 'CSSStyleSheet

可能是什么原因?我该如何解决? 预先感谢!

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)