Css 在React（使用挂钩）-滑动文本中再次触发动画时重置动画

我正在构建一个连接Spotify的简单音乐应用程序。 如果歌曲/艺术家的名称太长（文本溢出），则动画将制作文本的相邻副本，然后将其中两个无限向左滑动

问题是，如果长文本被另一个长文本替换，动画不会重置，而是从中间继续。 我尝试删除该类，然后立即添加它，但此方法不起作用。

该类称为“active_animation”，并使用React有条件地呈现

变量

isOverflowingTitle

和

isOverflowingNames

设置为true时，激活动画。每当一首新歌更新时，就会触发

useffect

这是我的代码：

import React, { useContext, useRef, useEffect, useState } from 'react';
import ArtistsLinksBySong from '../ArtistsLinksBySong';
import { PlayerSourceContext } from '../../store/PlayerSourceContext';

export default () => {
  const [playerSource] = useContext(PlayerSourceContext);
  const containerTagRef = useRef(null);
  const songTitleTag = useRef(null);
  const artistNamesTag = useRef(null);
  const [isOverflowingTitle, setIsOverflowingTitle] = useState(false);
  const [isOverflowingNames, setIsOverflowingNames] = useState(false);

  useEffect(() => {
    let mainPixelWidth = containerTagRef.current.clientWidth;
    artistNamesTag.current.clientWidth > mainPixelWidth - 16
      ? setIsOverflowingNames(true)
      : setIsOverflowingNames(false);

    songTitleTag.current.clientWidth > mainPixelWidth - 16
      ? setIsOverflowingTitle(true)
      : setIsOverflowingTitle(false);
  }, [playerSource]);

  const getSongArtists = () => {
    if (playerSource.artists) {
      return <ArtistsLinksBySong artistArrOfObj={playerSource.artists} />;
    } else {
      return 'Artist Name';
    }
  };
  const getSongTitle = () => {
    if (playerSource.name) {
      return String(playerSource.name);
    } else {
      return 'Track Title';
    }
  };

  return (
    <div id='player-song-text-container' ref={containerTagRef}>
      <div id='title-name-text'>
        <div id='move-control'>
          <div
            id='move1'
            ref={songTitleTag}
            className={isOverflowingTitle ? 'active_animation' : ''}
          >
            {getSongTitle()}
          </div>
          {isOverflowingTitle && (
            <div className='adjacent-copy'>{getSongTitle()}</div>
          )}
        </div>
      </div>
      <div id='artists-names-text'>
        <div id='move-control2'>
          <div
            id='move2'
            ref={artistNamesTag}
            className={isOverflowingNames ? 'active_animation' : ''}
          >
            {getSongArtists()}
          </div>
          {isOverflowingNames && (
            <div className='adjacent-copy'>{getSongArtists()}</div>
          )}
        </div>
      </div>
      <div id='left-shade'></div>
      <div id='right-shade'></div>
    </div>
  );
};

import React，{useContext，useRef，useffect，useState}来自'React'；
从“../ArtistsLinksBySong”导入ArtistsLinksBySong；
从“../../store/PlayerSourceContext”导入{PlayerSourceContext}；
导出默认值（）=>{
常量[playerSource]=使用上下文（PlayerSourceContext）；
const containerTagRef=useRef（null）；
const songTitleTag=useRef（null）；
const artistNamesTag=useRef（null）；
常量[isOverflowingTitle，setIsOverflowingTitle]=useState（false）；
常量[isOverflowingNames，setIsOverflowingNames]=useState（false）；
useffect（（）=>{
让mainPixelWidth=containerTagRef.current.clientWidth；
artistNamesTag.current.clientWidth>mainPixelWidth-16
？setIsOverflowingNames（真）
：setIsOverflowingNames（false）；
songTitleTag.current.clientWidth>mainPixelWidth-16
？setIsOverflowingTitle（真）
：setIsOverflowingtile（假）；
}，[playerSource]）；
常量getSongArtists=（）=>{
if（playerSource.artists）{
return
这似乎是一种不好的做法-但是这个
setTimeout（（）=>{….}，0）
解决了这个问题：

useEffect(() => {
    let mainPixelWidth = containerTagRef.current.clientWidth;
    setTimeout(() => {
      artistNamesTag.current.clientWidth > mainPixelWidth - 16
        ? setIsOverflowingNames(true)
        : setIsOverflowingNames(false);

      songTitleTag.current.clientWidth > mainPixelWidth - 16
        ? setIsOverflowingTitle(true)
        : setIsOverflowingTitle(false);
    }, 0);

    return () => {
      setIsOverflowingNames(false); // reset this animation
      setIsOverflowingTitle(false); // reset this animation
    };
  }, [playerSource]);