如何用 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
旧文推荐:
▼点击阅读原文获取文中链接