滑动到可视区域出现动画 WOW.js + animate.css
作者:互联网
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 bounceInUp" data-wow-offset="100" data-wow-duration="0s" data-wow-delay="0.5s">关于我们</section> <section className="wow bounceInUp" data-wow-offset="100" >关于我们</section> </div> <div className={'test4'}> <section className="wow bounceInUp" data-wow-offset="100" >关于我们</section> <section className="wow bounceInUp" data-wow-offset="100" >关于我们</section> <section className="wow bounceInUp" 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; //}
标签:WOW,bootstrap,js,react,122,关于,import,animate 来源: https://www.cnblogs.com/it-Ren/p/12175080.html