我正在制作一个基于ReactJS的个人网站。由于这是一个单页应用程序,我想让我的网站有条件地呈现。当用户向下滚动以查看不同的部分时,渲染会在我的页面上呈现每个部分在我的页面上,因为当用户查看 时,我希望我的组件动画,而不是所有这些组件在开始时都是动画的。
<Section styles='me' id={'top'}>
<img className="background-image" src={require('../img/Sydney.jpg')} />
<Animated animationIn="zoomIn" animationOut="zoomOut" isVisible={true}>
<div><Avatar src={require('../img/me.jpg')} size={200} round={true} /></div>
</Animated>
<h1>Jack Lau</h1>
<h3>Web/Mobile Apps Developer</h3>
<h3 style={{ maxWidth: 480 }}>Core Skills:<br/>Ready for React, Redux, Typescript, ES6, JSX, Babel and Webpack. Objective-C, Android Development, C#, JavaScript, PHP, Database Design</h3>
<div style={{ marginBottom: '30px' }}>
<a href='https://www.linkedin.com/in/jacklau9515/' className='btn-icon' target='_blank'><i className='fa fa-linkedin-square'></i></a>
<a href='https://github.com/Jacklau9515' className='btn-icon' target='_blank'><i className='fa fa-github-square'></i></a>
<a href='https://plus.google.com/u/0/100888601415107489035' className='btn-icon' target='_blank'><i className='fa fa-google-plus-square'></i></a>
</div>
<Animated animationIn="rubberBand" animationOut="zoomOut" isVisible={true}>
<a href='#hire-me' className='btn'>Hire Me!</a>
</Animated>
</Section>
<Section styles='resume'>
<div id={'background'}>
<img className="background-image" src={require('../img/xpic11075_sc115.com.jpg')} />
<h3 className='title'>My Personal Introduction</h3>
<Animated animationIn="fadeInLeft" animationOut="rollOut" animationInDelay="3" isVisible={true}>
<p>I graduated from <a href="http://www.utas.edu.au/" target="_blank"><u>University of Tasmania (UTAS)</u></a> in December 2017 with an undergraduate degree (Bachelor of Information and Communication Technology, Software Development). Participate in the implementation of <a href="https://itunes.apple.com/us/app/dbdc/id1296090690?mt=8" target="_blank"><u>Digitized Bike Data</u></a> Project and served as Leader Software Developer of the team.</p>
<p>I am very detail oriented. You can easily contact me at any hour of the day, and I am enthusiastic and passionate about architectural and design patterns, best practices and cutting-edge technologies.</p>
<p>During my three years of university study, no less than a Distinction (DN) Grade of All my programming-related subjects, especially web programming. The following table shows the scores and descriptions of all my programming subjects:</p>
</Animated></Section>
注意:动画是一个React组件,用于使用Animated.css显示或隐藏带动画的元素。
答案 0 :(得分:0)
您可以采取以下一种方法:
在构建Component时,建立某种形式的内部状态 - 跟踪浏览器的Scroll Position并使用某种事件处理程序更新它。当此位置到达您希望组件为Animate的点时,在内部状态内翻转布尔值。
在渲染方法中,只有在满足某些特定状态时,才可以使用{{Expression/Variable/Const Evaluating to True} && <Component>}
有条件地渲染组件。
以下是一些示例代码。我不确定React / Re-Renders的性能如何,我不能说这段代码必将有效 - 我只是想指出你正确的方向;您可以尝试应用的一些逻辑。
通过JSX有条件地渲染的原则是一个功能强大的原则,您可以使用它根据您开发的某些自定义逻辑方案选择性地渲染组件。
class AnimatedContainer extends Component {
Constructor(props) {
super(props)
this.state = {
renderComponent1: false
scrollPosition: "0"
}
this.handleScroll = this.handleScroll.bind(this)
}
handleScroll(scrollPosition) {
this.setState({
scrollPosition = document.documentElement.scrollTop })
if (scrollPosition > 300) { this.setState({ renderComponent1: true })}
}
componentDidMount() {
window.onscroll = () => this.handleScroll(this.state.scrollPosition)
}
componentDidUpdate() {
window.onscroll = () => this.handleScroll(this.state.scrollPosition)
}
render() {
return(
<div>
{renderComponent1 && <AnimatedComponent1>}
</div>
)}
}
我被告知更好的方法是使用addEventListener:
windowScroll = () => this.handleScroll(this.state.scrollPosition)
componentDidMount() {
window.addEventListener('scroll', this.windowScroll)
}
componentWillUnmount() {
window.removeEventListener('scroll', this.windowScroll)
}
编辑:您还必须单独实施动画逻辑 - 我假设您的动画组件将有自己的方法来执行此操作。