简评：滚动动画让组件向下滚动时出现在页面上。这篇文章是介绍如何使用 React 和 CSS3 做到这一点。

这里将通过构建一个简单的例子来学习这个滚动动画。

首先构建 Header 组件。

***Header > index.js***-----------------------import React from 'react';import './styles.css';const Header = () => (  
    
    
     
Title
  
    
)export default Header;

添加样式。

***Header > styles.css***-------------------------.header {   display: flex;   justify-content: center;   align-items: center;   height: 100vh;   width: 100vw;}.header h1 {   font-size: 30px;   color: white;}

现在构建 App 组件.

***App > index.js***--------------------import React, { Component } from 'react';import Header from '../Header';class App extends Component {   constructor() {     super();     this.state = {        className: ''     }   }   render() {     return(       
    
         
     
       
    
     )   }}export default App;

我们的应用现在只渲染 Header 这个组件，在 Header 下面，我们将创建 About 组件来显示一个简单的 Text。当向下滚动的时候这个 Text 将从左边滑入。

我们还需要做一些操作：

• 使用 state 来维护组件的 className。
• 当用户滚动一定数量的像素时，则将状态设置为另一个类名。
• 构建一个函数用户处理滚动操作。

***App > index.js***--------------------import React, { Component } from 'react';import Header from '../Header';class App extends Component {   constructor() {     super();     this.state = {        className: 'hidden'     }   }   handleScroll() {     if (document.documentElement.scrollTop > 430) {       this.setState({         className: 'show'       })     }    }   componentDidMount() {     window.onscroll = () => this.handleScroll()   }   render() {     return(       
    
         
     
       
    
     )   }}export default App;

如果不确定要显示多少像素，可以通过下面这段代码来查看：

console.log(document.documentElement.scrollTop);

当用户滚动的时候，handleScroll 函数被调用，当滚动超过 430 像素的时候，state 将设为 show 并匹配对应的 CSS。

现在来构建一个 About 组件。

***About > index.js***-----------------------import React, { Component } from 'react';import './styles.css';class About extends Component {  render() {    return(      
    
        
     
          
      
            
       
Title
            
       
This is a text that will appear.
          
      
         
     
      
    
     )   }}export default About;

如果用户滚动没有超过 430 像素，包含 text 的 div 的类名将是 ‘hidden’，一旦超过 430 像素，类名将设为 ‘show’。并且匹配相应的 CSS，现在我们在 App 中导入 About 组件。

***App > index.js***--------------------import React, { Component } from 'react';import About from '../About';import Header from '../Header';class App extends Component {   constructor() {     super();     this.state = {        className: 'hidden'     }   }   handleScroll() {     if (document.documentElement.scrollTop > 430) {       this.setState({         className: 'show'       })     }    }   componentDidMount() {     window.onscroll = () => this.handleScroll()   }   render() {     return(       
    
         
     
         
            
    
     )   }}export default App;

给 About 组件添加样式。

***About > styles.css***------------------------.about-wrapper {   height: 30em;   width: 100vw;}.about-text {   position: relative;   width: 30em;   height: 20em;}.show {   position: absolute;   left: -30em;   width: 30em;   height: 20em;   -webkit-animation: slide-in 1s forwards;   animation: slide-in 1s forwards;}@-webkit-keyframes slide-in {  100% { left: 0 }}@keyframes slide-in {  100% { left: 0 }}

到此就完成了所有的操作，最后来看看 demo 效果。

英文原文：