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

【问题标题】：Resetting an animation when it is triggered again in React (using hooks) - Sliding Text在 React 中再次触发动画时重置动画（使用钩子） - 滑动文本
【发布时间】：2019-11-20 13:39:54
【问题描述】：

我正在构建一个连接到 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

【问题讨论】：

标签： css reactjs react-hooks use-effect

【解决方案1】：

这似乎是一种不好的做法 - 但这个 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]);

【讨论】：