react 项目中使用 wow 做动画

背景:

react项目中在做web界面的时候需要展示出一个出场动画,首先想到就是wow.js,之前使用jQuery的时候经常使用wow.js已轻车熟路,但是运用到react中却发现稍微陌生,遂写此随笔,能让各位看官可以在10分钟之内完成这个需求,很简单方便

实现:

1. 下载安装插件:

   npm i react-wow --save

   npm i animate.css@3.5.0 --save

    

2. 引用:

   import ReactWOW from 'react-wow'
   import '../../../node_modules/animate.css/animate.min.css　

    

3. 使用:

                       <Row type={'flex'} align='middle' className='row-3' gutter={100}>
                           <ReactWOW animation='fadeInLeftBig'>
                               <Col span={12}>
                                   <div>
   　　　　                         </div>
                               </Col>
                           </ReactWOW>
                           <ReactWOW animation='fadeInRightBig'>
                               <Col span={12}>
                                   <div>                    
                                   </div>
                               </Col>
                           </ReactWOW>
                       </Row>