如何根据滚动位置在 ReactJS 应用程序中触发动画？

在本文中，我们将学习如何使用 npm 包 react-animated-css-onscroll 根据滚动位置触发组件上的动画。

在许多网站上，我们看到滚动时会触发一些动画。这提供了非常好的用户体验。

使用模块 react-animated-css-onscroll，我们可以在向下滚动到组件时触发动画。

react-animated-css-onscroll 的特点：

• 轻量级模块。
• 无需创建函数即可知道组件在网页上的当前位置。
• 有多种动画可供选择。
• 非常容易使用。

先决条件：

react.js的介绍和安装

句法：

我们将组件包装在这些标签中。

在这里，在动画中，我们传递可用的动画名称。其中一些示例包括反弹、闪光、脉冲、橡皮筋、摇晃等等。

创建反应应用程序：

第 1 步：创建 react 项目文件夹，为此打开终端，如果您已经全局安装了 create-react-app，则输入命令 npm create-react-app 文件夹名称。如果您还没有安装 create-react -app 通过使用命令 npm -g create-react-app 全局安装，或者可以通过npm i create-react-app 在本地安装。

npm create-react-app project

第 2 步：创建项目文件夹（即项目）后，使用以下命令移动到该文件夹。

cd project

安装和添加模块：

第 1 步：要安装软件包，请转到终端并运行命令

npm i react-animate-on-scroll

第 2 步：在 head 标签内的public文件夹中的index.html文件中添加 Animated.css。

索引.html

项目结构：

示例 1：-在此示例中，我们在 AnimationOnScroll 中包装了一个简单的标题文本，并将 props animationIn 作为bounceInRight 传递，这将使文本从右侧浮动。为了使用 AnimationOnScroll，我们从“react-animated-css-onScroll”导入它。

除此之外，我们还为两个标题标签使用了一些内联样式，为其添加边距，以便我们可以在这些文本之间滚动。

App.js

import {AnimatedOnScroll} from "react-animated-css-onscroll";
function App() {
  return (
    

          
Hey Geek!
          
             
Welcome to Geeksforgeeks
          
      
  );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：

在这里，我们可以看到，当我们向下滚动时，“Welcome to Geeksforgeeks”的文字从右侧滑入。

让我们用另一个例子更好地理解。

示例 2：在 App.js 中，让我们创建一个组件页面，显示我们正在使用的动画的名称。让我们添加一些可用的动画，看看组件在滚动时的外观。

应用程序.js

const Page = (props) => { // creating Component Page
  const {children,...rest} =props;
  return (
      

        {children}
     
 )
}
  
function App() {
   return (
      

      
   );
}
  
export default App;

现在我们将从 App.js 文件中的“react-animated-css-onscroll”导入 AnimatedOnScroll。

在这里，对于每个 Page 组件，我们都包裹着 AnimatedOnScroll 标签，并将一些可用的动画作为 props 传递给 animationIn，例如bounce、jello 等。

应用程序.js

import {AnimatedOnScroll} from "react-animated-css-onscroll";
  
const Page = (props) => {
  const {children,...rest} =props;
  return (
  

     {children}
    
 )
}
  
function App() {
  return (
    

      
Hey! Geek Welcome
      
Let's see some effects
      

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
     
     
       
    
  );
}
  
export default App;

我们现在将为页面组件添加一些样式。我们正在使偶数子页面组件的背景颜色为绿色，文本颜色为白色。

索引.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 
     'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 
     'Cantarell', 'Fira Sans', 'Droid Sans', 
     'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  
code {
  font-family: source-code-pro, Menlo, 
    Monaco, Consolas, 'Courier New', monospace;
}
.page {
  height: 30px;
  width:300px;
  font-style: italic;
  margin-top: 20px;
  text-align: center;
  padding: 70px 0;
  font-size: 2rem;
  font-weight: 800;
}
  
#start {
  margin-top: 20px;
  display: flex;
  flex-direction: column;     
  justify-content: center; 
  align-items: center;    
}
#start div:nth-child(2n){
  background-color: rgb(6, 71, 6);
  color: white;
}

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：

参考： https://www.npmjs.com/package/react-animation-on-scroll