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

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/

有很多动画可以在滚动时触发

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

How to animate when user scrolls to view

css

css-transitions

reactjs