使用React实现滚动动画

滚动动画让组件在您向下滚动页面时出现在页面上。这篇文章是关于如何使用React和CSS3来实现的!

对于这个例子,我们用app,Header和About组件。

首先,我能创建我们的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;

我们的应用程序组件现在指渲染我们的Geader组件。在标题下方,我们将创建包含文本的关于组件。当我们向下滚动适,文本将从左侧滑入。

在此之前,我们必须做几件时间:

  • 我们的状态保持关于图像和文本的类名;
  • 如果用户滚动一定数量的像素,则将状态设置为另一个类名;
  • 创建一个处理滚动操作的函数;

 

***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像素,handleScroll函数才会将状态设置为“显示”而不是“隐藏”。

我们创建关于组件

 

***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 像素,则包含文本的div的className将被“隐藏”。一旦用户滚动过了430像素,className将是“show”。一旦我们到达CSS,这一点很重要。但首先,让我们在App组件中导入关于组件。

***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 > 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 } }

OK~ 我们完成了!

现在,我们向下滚动页面,文本将从左侧滑入。我没有添加任何样式组件,所以看起来不是很漂亮,但是功能是完全实现了!

如果希望他们从右侧、顶部、底部出现,只需更改下一个值:

.show { left/right/top/bottom: -30em } @-webkit-keyframes slide-in { 100% { left/right/top/bottom: 0 } } @keyframes slide-in { 100% { left/right/top/bottom: 0 } }
原文链接:,转发请注明来源!

发表评论