滑动到可视区域出现动画 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})
};