javascript - 如何在React中垂直滑动文本

Question

我正在尝试制作垂直文本幻灯片。由于没有在 reactjs 中找到帮助，我尝试自己做，我对结果非常满意，但每个单词幻灯片的末尾都会出现一个小错误。

我想有多种方法可以创建这个动画，但这是我根据 JS 知识想到的唯一一种方法。

这是我的代码:

import React, { useEffect, useRef, useState } from 'react'

const Version1 = () => {

  const [ words, setWords ] = useState(['Victor', 'Alex', 'Lucie'])

  const wrapperRef = useRef()

  const handleAnim = () => {

    setTimeout(() => {
      const copyWords = [ ...words ];
      const firstElem = copyWords.splice(1)
      wrapperRef.current.style.transition = 'none';
      wrapperRef.current.style.top = '0px'
      setWords([ ...firstElem.concat(copyWords) ])
    },1000);

    wrapperRef.current.style.transition = '0.5s';
    wrapperRef.current.style.top = '-70px'
  }
  useEffect(() => {
    setTimeout(() => {
      handleAnim()
    }, 2000);
  })

  return (
    <>
      <div className="test-container">
        <div className='test-title'>Hello</div>
        <div className='text-container-word'>
          <div ref={wrapperRef} className='text-container-word-wrapper'>
            <span className='text-word'>{words[0]}</span>
            <span className='text-word'>{words[1]}</span>
          </div>
        </div>
      </div>
      <style jsx>
        {`
          .test-container {
            padding: 100px 0;
            width: 100%;
            display: flex;
          }
          .test-title {
            font-size: 48px;
            font-weight: bold;
            color: blue;
          }
          .text-container-word {
            position: relative;
            width: 200px;
            height: 70px;
            background-color: green;
            display: inline-block;
            overflow: hidden;
            margin-top: -7px;
          }
          .text-container-word-wrapper {
            height: auto;
            position: relative;
            top: 0px;
          }
          .test-container h1 {
            position: relative;
            display: inline;
            padding: 10px;
          }
          .text-word {
            height: 70px;
            font-size: 48px;
            font-weight: bold;
            display: block;
            transition: 0.5s;
            line-height: 70px;
          }
       

        `}
      </style>
    </>
  )
}

export default Version1

Answer 1

这是一个纯粹的基于 css 的解决方案，它使用来自 state 的单词，而不使用 useEffect hacks。

const {useState} = React;

function App() {
  const [words, setWords] = useState(["Victor", "Alex", "Lucie", "Michael"]);
  return (
    <div className="App">
      <div className="scroller">
        <span>
          {words[0]}
          <br />
          {words[1]}
          <br />
          {words[2]}
          <br />
          {words[3]}
        </span>
      </div>
    </div>
  );
}

ReactDOM.render(
      <App/>,
      document.getElementById("react")
    );

.App {
  font-family: sans-serif;
  text-align: center;
}

.scroller {
  height: 1.2em;
  line-height: 1.2em;
  position: relative;
  overflow: hidden;
  font-size: 40px;
  text-align: center;
}
.scroller > span {
  position: absolute;
  top: 0;
  animation: slide 6s infinite;
  font-weight: bold;
  background-color: green;
}
@keyframes slide {
  0% {
    top: 0;
  }
  25% {
    top: -1.2em;
  }
  50% {
    top: -2.4em;
  }
  75% {
    top: -3.6em;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react">