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/

滚动时可以触发很多动画

用户滚动查看时如何制作动画

1 个答案: