antd pro 使用 wowjs 动画

官方文档

animate.css
WOW

安装
 npm i wowjs --save
 # 笔者当前版本 1.1.3
 # 依 animate.css版本  4.1.1
引入animate.css

global.less引入:

@import '~animate.css/animate.min.css';
组件加入动画

index.jsx

// 依赖
import { WOW } from 'wowjs';


 // 初始化
  componentDidMount() {
    new WOW({
      offset: 0,
      boxClass: 'wow',
      animateClass: 'animate__animated', //当前版本animate.css,class名称为animate__animated,注意修改【和文档有出入】
      mobile: true,
      live: false,
    }).init();
  }

//使用 注意当前版本命名规则 animate__fadeInDown ,查阅animate.css官网 
<div className="wow animate__fadeInDown" data-wow-duration="1s" data-wow-delay="0.5s">
	测试下
</div>
posted @ 2021-02-05 17:37  ytsee  阅读(67)  评论(0)    收藏  举报