如何用 React 实现滚动动画

价值 | 思考 | 共鸣

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

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

首先构建 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 效果。

英文原文：Scroll Animations with Rea
旧文推荐：

图片加载时使用 SVG 作为图片 placehold

如何用 CSS 网格快速做出网站原型

▼点击阅读原文获取文中链接