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

Question

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

我找到 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="+375 29 973 79 43"
                    email="vasyapupkin@gmail.com"
                    position="top"
                />
                <AboutInfo
                    name="Aleksey Smirnov"
                    number="+375 29 337 91 07"
                    email="asmirn@gmail.com"
                    position="middle"
                />
                <AboutInfo
                    name="Ivan Karpovski"
                    number="+375 29 655 74 25"
                    email="karpovski@gmail.com"
                    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 行并通过 console.log() 命令检查了 textWrapper 是否存在，控制台显示如下：

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

Answer 1

你应该使用，

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

因为 getElementsByClassName returns 具有所有给定 class 名称的所有子元素的 array-like 对象。

尝试为 p 标签分配一些 id 并尝试使用 getElementById

let 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 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, .letter'),
          translateX: [0, -30],
          opacity: [1, 0],
          easing: "easeInExpo",
          duration: 1100,
          delay: (el, 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="+375 29 973 79 43"
                email="vasyapupkin@gmail.com"
                position="top"
            />
            <AboutInfo
                name="Aleksey Smirnov"
                number="+375 29 337 91 07"
                email="asmirn@gmail.com"
                position="middle"
            />
            <AboutInfo
                name="Ivan Karpovski"
                number="+375 29 655 74 25"
                email="karpovski@gmail.com"
                position="down"
            />
        </div>
    </div>
);
}

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

I'm trying to add animation to my web page title using anime.js and jQuery, but it throws an error

javascript

html

jquery

reactjs

anime.js