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

问题描述

我有一个关于我们的网页，并且需要对此标题设置动画：

我找到了this个，它使用了anime.js和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="[email protected]"
                    position="top"
                />
                <AboutInfo
                    name="Aleksey Smirnov"
                    number="[phone]"
                    email="[email protected]"
                    position="middle"
                />
                <AboutInfo
                    name="Ivan Karpovski"
                    number="[phone]"
                    email="[email protected]"
                    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,easing: "easeInExpo",duration: 1100,i) => 100 + 30 * i
});

这是我得到的错误：

TypeError: Cannot read property 'replace' of undefined

我已经删除了第五行，并通过textwrapper命令检查了console.log()是否存在，并且控制台显示了这样的内容：

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

解决方法

您应该使用

let textWrapper = document.getElementsByClassName('title')[0];
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g,"<span class='letter'>$&</span>");

因为getElementsByClassName返回具有所有给定类名的所有子元素的类似数组的对象。

尝试为p标签分配一些ID，然后尝试使用getElementById

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

Am添加新的功能组件解决方案！我认为这可能对您有帮助。

import React from 'react';
import '../css/About.css';
import AboutInfo from "../components/AboutInfo";

// THE PACKAGE I HAVE USED
import anime from 'animejs';

export default function App() {
  const animationRef = React.useRef(null);
  React.useEffect(() => {
    let textWrapper = document.getElementsByClassName('title');
    textWrapper[0].innerHTML = textWrapper[0].textContent.replace(/\S/g,"<span className='letter'>$&</span>");

    animationRef.current =
      anime.timeline({ loop: true })
        .add({
          targets: document.querySelectorAll('.title,.letter'),translateX: [40,0],translateZ: 0,opacity: [0,1],easing: "easeOutExpo",duration: 1200,delay: (el,i) => 500 + 30 * i
        }).add({
          targets: document.querySelectorAll('.title,translateX: [0,-30],opacity: [1,easing: "easeInExpo",duration: 1100,i) => 100 + 30 * i
        });
  },[]);
  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="[email protected]"
                position="top"
            />
            <AboutInfo
                name="Aleksey Smirnov"
                number="[phone]"
                email="[email protected]"
                position="middle"
            />
            <AboutInfo
                name="Ivan Karpovski"
                number="[phone]"
                email="[email protected]"
                position="down"
            />
        </div>
    </div>
);
}