我想使用 <ScrollAnimation> 显示动画文本，但我看到一个空白页答案

【问题标题】：I want to display animated text using <ScrollAnimation> but i see a blank page我想使用 <ScrollAnimation> 显示动画文本，但我看到一个空白页
【发布时间】：2022-01-21 08:32:55
【问题描述】：

我已经安装了 react-animate-on-scroll 和 animate.css 我还尝试了 Rotate 组件。我想在 col-3 中渲染动画文本如何实现这一点

import React , { Component } from 'react';
import ReactDOM from 'react-dom';
import ScrollAnimation from 'react-animate-on-scroll';

 
 const Animation = () => (

<ScrollAnimation animateBounce="bounceIn">

<p>Text bounces in on scroll</p>

</ScrollAnimation>

)


ReactDOM.render( <Animation />, document.getElementById("col-3"));

   


 <link rel="stylesheet" href="style.css">


 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

   

<body>

<div class="row">

<div class="col-1">
   </div>
 
<div class="col-2">
 </div>
 
<div id="col-3">
 </div>
 
 
 

</div>

</body>

</html>

【问题讨论】：

给定的代码不起作用
工作我只是写动画部分

标签： reactjs animation

【解决方案1】：

  <ScrollAnimation animateIn="rotateIn" offset={800}>
    <h1>Rotating!</h1>
  </ScrollAnimation>

offset 是可选的，如果您打开页面并且动画元素不低于页面底部的偏移量（默认为 150 像素），则它不会动画。

你可以在https://codesandbox.io/s/optimistic-hugle-h2fh5?file=/src/Animation.js看到完整版

【讨论】：