我正在尝试使用 anime.js 和 jQuery 将动画添加到我的网页标题中，但它会引发错误

Question

我有一个关于我们的网页，我需要为这个标题制作动画：

我找到了这个，它使用anime.jsand jQuery。

这是我的About.js：

import React from 'react';

import '../css/About.css'

import '../scripts/aboutAnimation'

import AboutInfo from "../components/AboutInfo";

const About = () => {

    return (

        <div className="containerAbout">

            <div className="title-container">

                <p className="title">About us...</p>

            </div>

            <div className="forest">

                <AboutInfo

                    name="Vasiliy Pupkin"

                    number="[phone]"

                    email="[e-mail]"

                    position="top"

                />

                <AboutInfo

                    name="Aleksey Smirnov"

                    number="[phone]"

                    email="[e-mail]"

                    position="middle"

                />

                <AboutInfo

                    name="Ivan Karpovski"

                    number="[phone]"

                    email="[e-mail]"

                    position="down"

                />

            </div>

        </div>

    );

}

export default About;

这是我的aboutAnimation.js：

import anime from 'animejs/lib/anime.es.js';

let textWrapper = document.getElementsByClassName('title');

textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})

    .add({

        targets: '.title .letter',

        translateX: [40,0],

        translateZ: 0,

        opacity: [0,1],

        easing: "easeOutExpo",

        duration: 1200,

        delay: (el, i) => 500 + 30 * i

    }).add({

    targets: '.title .letter',

    translateX: [0,-30],

    opacity: [1,0],

    easing: "easeInExpo",

    duration: 1100,

    delay: (el, i) => 100 + 30 * i

});

这是我得到的错误：

TypeError: Cannot read property 'replace' of undefined

我删除了第 5 行并textWrapper通过console.log()命令检查是否存在，控制台显示如下内容：

顺便说一句：如果我在 Chrome 控制台中输入这两行，我会得到：

Answer 1

你应该使用，let textWrapper = document.getElementsByClassName('title')[0];textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");因为 getElementsByClassName 返回具有所有给定类名的所有子元素的类数组对象。尝试为 p 标签分配一些 id 并尝试使用 getElementByIdlet textWrapper = document.getElementById('title');textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");正在添加新的功能组件解决方案！我想这可能对你有帮助。import React from 'react';import '../css/About.css';import AboutInfo from "../components/AboutInfo";// THE PACKAGE I HAVE USEDimport anime from 'animejs';export default function App() {&nbsp; const animationRef = React.useRef(null);&nbsp; React.useEffect(() => {&nbsp; &nbsp; let textWrapper = document.getElementsByClassName('title');&nbsp; &nbsp; textWrapper[0].innerHTML = textWrapper[0].textContent.replace(/\S/g, "<span className='letter'>$&</span>");&nbsp; &nbsp; animationRef.current =&nbsp; &nbsp; &nbsp; anime.timeline({ loop: true })&nbsp; &nbsp; &nbsp; &nbsp; .add({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; targets: document.querySelectorAll('.title, .letter'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; translateX: [40, 0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; translateZ: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: [0, 1],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; easing: "easeOutExpo",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: 1200,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; delay: (el, i) => 500 + 30 * i&nbsp; &nbsp; &nbsp; &nbsp; }).add({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; targets: document.querySelectorAll('.title, .letter'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; translateX: [0, -30],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: [1, 0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; easing: "easeInExpo",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: 1100,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; delay: (el, i) => 100 + 30 * i&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <div className="containerAbout">&nbsp; &nbsp; &nbsp; &nbsp; <div className="title-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p className="title">About us...</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div className="forest">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <AboutInfo&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="Vasiliy Pupkin"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; number="[phone]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; email="[e-mail]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position="top"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <AboutInfo&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="Aleksey Smirnov"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; number="[phone]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; email="[e-mail]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position="middle"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <AboutInfo&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="Ivan Karpovski"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; number="[phone]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; email="[e-mail]"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position="down"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>);}