Question

定义

基于animejs封装的React组件。

图片展示

代码演示

import Anime from 'pile/dist/components/anime'
const {CssTransform} = Anime
let moveAlone = {
  targets: '.anime-move-demo-alone',
  left: '240px',
  backgroundColor: '#5EF3FB',
  borderRadius: 40,
  loop: false,
  delay: 300,
  autoplay: true,
  easing: 'easeInOutQuad'
},
moveMore = {
  targets: '.anime-move-demo',
  translateX: 250,
  direction: 'alternate',
  loop: false,
  delay: 500,
  autoplay: true,
  elasticity: (el, i, l) => {
return (200 + i * 200);
  }
}
<CssTransform {...moveAlone}>
  <div className="anime-move-demo-alone"></div>
</CssTransform>
<CssTransform {...moveMore}>
  <div className="anime-move-demo"></div>
  <div className="anime-move-demo"></div>
  <div className="anime-move-demo"></div>
</CssTransform>

属性

参数	描述	数据类型	默认值
targets	CSS Selectors	string
(CSS 属性名,驼峰式命名)	CSS 属性名	string
duration	持续的时间	number,function
delay	延迟	number, function	0
easing	动画运行轨迹	string
loop	次数	number, boolean
autoplay	是否自动播放	boolean	true
...	...	...	...

点击查看详细参数说明