使用 react-spring 在 React.js 中实现自动滚动动画

react jsjavascript libraryfront end technology更新于 2025/11/17 7:40:17

在本文中，我们将了解如何使用 react-spring 包在 React JS 中创建滚动到顶部的动画。

首先创建一个 React 项目 −

npx create-react-app tutorialpurpose

现在转到项目目录 −

cd tutorialpurpose

示例

安装 react-spring 包 −

npm install react-spring

react-spring 用于向我们的网站添加基于 Spring 概念的动画。

接下来，添加以下代码行在 App.js 中 −

import React,{useState} from 'react'
import { useSpring, animated } from 'react-spring'

export default function App(){
   const [flip, set] = useState(false)

   const words = ['We', 'came.', 'We', 'saw.', 'We', 'hold', 'it s', 'hands.']

   const { scroll } = useSpring({
      scroll: (words.length - 1) * 50,
      from: { scroll: 0 },
      reset: true,
      reverse: flip,
      delay: 200,
      onRest: () => set(!flip),
   })
   return (
      <animated.div
      style={{
         position: 'relative',
         width: '100%',
         height: 60,
         overflow: 'auto',
         fontSize: '1em',
         marginTop:200 ,
         border:"1px solid black"
      }}
      scrollTop={scroll}>
      {words.map((word, i) => (
         <div
            key={`${word}_${i}`}
            style={{ width: '100%', height: 50, textAlign: 'center' }}>
            {word}
         </div>
      ))}
      </animated.div>
   )
}