如何在 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">

Answer 2

使用 overflow-f:scroll 设置高度和宽度

overflow-y: scroll;

您还可以看到： https ://www.w3schools.com/cssref/tryit.asp?filename=trycss3_overflow-y