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

【问题标题】：How to animate when user scrolls to view用户滚动查看时如何设置动画
【发布时间】：2020-03-01 21:11:27
【问题描述】：

我已经开始使用 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 的情况下过渡到滚动视图？

【问题讨论】：

你可以看看stackoverflow.com/a/58556076/5124488
我肯定会推荐一个提供此功能的插件，例如 ScrollMagic，让它工作起来相对简单，让它在所有设备上一致地工作，而不是这样。

标签： css reactjs css-transitions

【解决方案1】：

看看这个库 https://www.react-reveal.com/

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

【讨论】：