未找到 GSAP 目标未定义

Question

使用 useSate，我可以在两段文字之间切换，从法语到英语。它工作正常，但我想使用 GSAP 设置更好的过渡。

我的配置不起作用，因为 gsap 目标为空或未定义。你能帮我调试那个问题吗？

带有两个按钮的段落组件：

      import React, { useRef, useState } from "react";
import { withRouter } from "react-router-dom";
import gsap from 'gsap';

const LanguageDesc = (props) => {

    const [state, setState] = useState({
        isActive: false,
        languageName: 'English'
    });

    let english = useRef(null);
    let french = useRef(null);

    const handleLanguage = () => {
        if (state.isActive === false) {
            setState({
                isActive: true,
                languageName: 'French'
            })
            gsap.from(english.current, {
                duration: 5,
                opacity: 0,
            })
        } else if (state.isActive === true) {
            setState({
                isActive: false,
                languageName: 'English'
            })
            gsap.from(french.current, {
                duration: 1,
                opacity: 0,
            });
        } else if (state.isActive === false) {
            setState({
                isActive: !state.isActive,
                languageName: 'French'
            })
            gsap.from(english.current, {
                duration: 5,
                opacity: 0,
            })
        }
    };


    return (
        <div>
            {state.isActive ?
                <p ref={english} className="eng-text">{props.state.desc_en}</p>
                : null}
            {state.isActive ?
                null
                : <p ref={french} className="fr-text">{props.state.desc_fr}</p>}
            <button className="btn-language" onClick={handleLanguage} > {state.languageName} text</button>
        </div >
    )

};
export default withRouter(LanguageDesc);

Answer 1

问题是 ref={el => (english = el)} 并且 french ref.

的用法相同

useRef 返回的引用是对在组件的整个生命周期中保存在内存中的单个对象的引用。您必须使用 current 属性.

读取和写入 ref

将 english 分配给 el 的值不会更改英文 ref 的值，它将 ref 替换为 el .然后您访问元素上的 current 属性，它（因为它不是 ref）将始终是 undefined.

english 已经是一个 ref，所以你不需要自己处理赋值。只需执行 ref={english}，React 将处理其余的。

更新

问题仍然存在，因为您的代码在 null.

时仍然使用 refs 作为元素

当isActive为false时，没有english元素。当为真时，没有 french 元素。然而，每个事件处理程序都取决于两个元素是否存在。

完全删除元素会增加 in/out 过渡动画的复杂性。也许相反，您可以使用 isActive 来确定是否显示每个 p 元素 (display: none;)，但始终呈现两者。

() => {
  const handleLanguage = () => {
    if (isActive) {
      gsap
        .from(french.current, {
          duration: 1,
          opacity: 0,
        })
        .eventCallback('onComplete', () => {
          setState({
            isActive: false,
            languageName: 'English',
          });
        });
    } else {
      gsap
        .from(english.current, {
          duration: 5,
          opacity: 0,
        })
        .eventCallback('onComplete', () => {
          setState({
            isActive: true,
            languageName: 'French',
          });
        });
    }
  };

  return (
    <div>
      <p
        ref={english}
        style={{ display: isActive ? 'none' : 'initial' }}
        className="eng-text"
      >
        {desc_en}
      </p>
      <p
        ref={french}
        style={{ display: isActive ? 'initial' : 'none' }}
        className="fr-text"
      >
        {desc_fr}
      </p>
      <button className="btn-language" onClick={handleLanguage}>
        {' '}
        {state.languageName} text
      </button>
    </div>
  );
};

未找到 GSAP 目标未定义

GSAP target undefined not found

javascript

css

reactjs

gsap

react-hooks

更新