我已经在滚动和动画上安装了react animate。我还尝试了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><ScrollAnimation animateIn="rotateIn" offset={800}>
<h1>Rotating!</h1>
</ScrollAnimation>
offset是可选的，如果打开页面并且动画元素不低于页面底部的偏移量(默认为150像素(，它就不会动画化。
你可以在上看到完整版本https://codesandbox.io/s/optimistic-hugle-h2fh5?file=/src/Animation.js