如何用 React 实现滚动动画
发布时间:2020-12-15 06:35:54 所属栏目:百科 来源:网络整理
导读:简评:滚动动画让组件向下滚动时出现在页面上。这篇文章是介绍如何使用 React 和 CSS3 做到这一点。 这里将通过构建一个简单的例子来学习这个滚动动画。 首先构建 Header 组件。 ***Header index.js***-----------------------import React from 'react';imp
简评:滚动动画让组件向下滚动时出现在页面上。这篇文章是介绍如何使用 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |