用的是animate.css和React_wow, React_wow依賴(lài)animate.css
https://cnpmjs.org/package/react-wow
https://daneden.github.io/animate.css/
$ npm install --save animate.css
$ npm install --save react-wow
使用：
import styles from './index.less';
import "animate.css";
import ReactWOW from 'react-wow'
...
...
render(){
return (
<ReactWOW animation='fadeIn' duration='0.5s' delay='1s'>
<div>123</div>
</ReactWOW>
)
}
如果除了使用animate.css里面的動(dòng)畫(huà)罐寨，還有其他動(dòng)畫(huà)需求，比如fadeIn進(jìn)來(lái)后里面還有幀動(dòng)畫(huà)芹务，怎么辦呢钧敞？測(cè)試發(fā)現(xiàn)ReactWOW的動(dòng)畫(huà)只是作用于其子元素菠赚，子元素里面再嵌套一個(gè)div即可寫(xiě)自己的動(dòng)畫(huà)啦~
<ReactWOW animation='fadeIn' duration='1s' delay='1s'>
<div style={{position: 'absolute', top: 0, right: 0, width: '48vw', height: '48vw'}} >
<div className={styles.animate2} />
</div>
</ReactWOW>
.animate2 {
background-size: 186vw 48vw ;
background-image: url('');
animation: ox2 0.5s steps(4, start) 0ms infinite normal backwards;
}
@keyframes ox2 {
0% {
background-position: 0 0;
}
100% {
background-position: -186vw 0;
}
}
