简评:滚动动画让组件向下滚动时出现在页面上。这篇文章是介绍如何使用 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 将从左边滑入。
我们还需要做一些操作:
***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