如何在用户滚动查看时设置动画

Question

我已经开始使用ReactJS构建网站，我想在视图滚动到.时将div元素动画化到视图中

我已经使用CSS关键帧来添加这样的动画；

.animateMe {
animation: IntroWelcomeImageAnimation 3s 0.2s forwards cubic-bezier(0.2, 0.8, 0.2, 1);  
}
@keyframes IntroLeftAnimation {
0% {
opacity: 0;
transform: translateX(-200px)
}
100% {
opacity: 1;
transform: translateY(0px)
}
}
@keyframes IntroRightAnimation {
0% {
opacity: 0;
transform: translateX(200px)
}
100% {
opacity: 1;
transform: translateY(0px)
}
}
@keyframes IntroWelcomeImageAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

JS文件

import React from 'react'
import '../../layout/intro.css';

const IntroPage = () => {
return (
<section className="Intro-Page">
<div className="animateme">
</div>
</section>
)
}
export default IntroPage

然而，问题是只有当页面加载时才会出现动画，也就是当元素也加载时。如果不使用JQuery，我怎么能让它们在滚动时转换到视图中？

Answer 1

查看此库 https://www.react-reveal.com/

有许多动画可以在滚动上触发