滑动到可视区域出现动画 WOW.js + Animate.css 数字统计动画插件Countup.js

import React, {Component} from 'react'; import "animate.css"; import { Helmet } from 'react-helmet'; import './home.scss'; import { Modal, Button } from 'antd'; import ReactWOW from 'react-wow'; import { Row, Col } from 'react-bootstrap'; import { AppContainer } from "./components"; import Carousel from "./Carousel"; import Dropdown from 'react-bootstrap/Dropdown'; import DropdownButton from 'react-bootstrap/DropdownButton'; import FooterNav from './components/FooterNav' import HttpUtils from '../../utils/HttpUtils' import WOW from 'wowjs'; export default class Home extends Component { constructor(props) { super(props) this.state ={ } } componentDidMount() { new WOW.WOW().init(); } render() {return ( <div>
        <div className={'test1'} />

        <div className={'test2'} />
        <div className={'test3'}>
          <section className="wow slideInUp" data-wow-offset="100" data-wow-duration="0s" data-wow-delay="0.5s">关于我们</section>
          <section className="wow slideInUp" data-wow-offset="100" >关于我们</section>
        </div>
        <div className={'test4'}>
          <section className="wow slideInUp" data-wow-offset="100" >关于我们</section>
          <section className="wow slideInUp" data-wow-offset="100" >关于我们</section>
          <section className="wow slideInUp" data-wow-offset="100" >关于我们</section></div>
      </div> ) } } .test1,.test2,.test3,.test4{ height: 1000px; background-color: rgba(122,122,122,.5); }

wow.js offset失效问题：

//body, html {
//  overflow-x: hidden;
//}

需要注意的点：

1.给每个块加 overflow:hidden ，裁剪外面的动画，不显得诡异。

2.

常用动画  :

• rubberBand
• slideInUp
• slideInDown
• bounceInUp
• shake
• tada

3.滚动到一定高度以后触发点击事件

1.监听页面滚动事件

 componentDidMount() { window.addEventListener('scroll', this.handleScroll); }

2.编写滚动事件代码

this.state={ 　　start:true } handleScroll = (event) => { console.log(document.documentElement.scrollTop) //滚动条高度
  let clientHeight = document.documentElement.clientHeight; //可视区域高度
  let scrollTop = document.documentElement.scrollTop;  //滚动条滚动高度
  let scrollHeight = document.documentElement.scrollHeight; //滚动内容高度
  if (this.state.start && scrollTop > 2150) { setTimeout(() => { this.setState({start: false}) this.scroll1(); this.scroll2(); this.scroll3(); this.scroll4(); }, 100) } if (scrollTop <= 2020) { this.setState({start: true}) } };

3.使用count.js组件 把start事件绑定到自己设置的函数上

  <CountUp start={0} end={item.value} duration={2.75} separator=" " decimals={0} decimal=","
                            // prefix="EUR " // suffix=" left"
                            onEnd={() => console.log('Ended! 👏')} onStart={() => console.log('Started! 💨')} > {({ countUpRef, start }) => ( <div> { this.scroll1 = start } <span ref={countUpRef} />
                                <span onClick={start}>万+</span>
                              </div> )} </CountUp>

4.随意设置一个滚动函数，用来绑定Count.js中的start事件

scroll1 = () => {
  this.setState({start: true})
};
scroll2 = () => {
  this.setState({start: true})
};
scroll3 = () => {
  this.setState({start: true})
};
scroll4 = () => {
  this.setState({start: true})
};