我正在构建一个连接到Spotify的简单音乐应用。 如果歌曲/歌手的名字太长太长（文本溢出），则动画会复制文本的相邻副本，然后幻灯片他们两个都离开了-无限。

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

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

变量isOverflowingTitle和isOverflowingNames设置为true时，将激活动画。每当有新歌曲更新时，就会触发useEffect。

这是我的代码：

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>
  );
};

你们将如何解决这个问题？

顺便说一下，这是仓库：https://github.com/itayperry/react_spotify_player