如何用 React 实现滚动动画

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

如何用 React 实现滚动动画

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

首先构建 Header 组件。

***Header > index.js***
-----------------------
import React from 'react';
import './styles.css';
const Header = () => (
  <div className="header">
    <h1>Title</h1>
  </div>
)
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(
       <div>
         <Header />
       </div>
     )
   }
}
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(
       <div>
         <Header />
       </div>
     )
   }
}
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(
      <div className="about-wrapper">
        <div className="about-text">
          <div className={this.props.className}>
            <h3>Title</h3>
            <p>This is a text that will appear.</p>
          </div>
         </div>
      </div>
     )
   }
}
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(
       <div>
         <Header />
         <About className={this.state.className} />
       </div>
     )
   }
}
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 效果。

如何用 React 实现滚动动画