CssTransformcss3过渡动画

author: 张经纬

定义

基于animejs封装的React组件。

图片展示

CssTransformcss3 过渡动画 - 图1

代码演示

  2. import Anime from 'pile/dist/components/anime'
  3. const {CssTransform} = Anime
  5. let moveAlone = {
  6.   targets: '.anime-move-demo-alone',
  7.   left: '240px',
  8.   backgroundColor: '#5EF3FB',
  9.   borderRadius: 40,
  10.   loop: false,
  11.   delay: 300,
  12.   autoplay: true,
  13.   easing: 'easeInOutQuad'
  14. },
  15. moveMore = {
  16.   targets: '.anime-move-demo',
  17.   translateX: 250,
  18.   direction: 'alternate',
  19.   loop: false,
  20.   delay: 500,
  21.   autoplay: true,
  22.   elasticity: (el, i, l) => {
  23.     return (200 + i * 200);
  24.   }
  25. }
  27. <CssTransform {...moveAlone}>
  28.   <div className="anime-move-demo-alone"></div>
  29. </CssTransform>
  31. <CssTransform {...moveMore}>
  32.   <div className="anime-move-demo"></div>
  33.   <div className="anime-move-demo"></div>
  34.   <div className="anime-move-demo"></div>
  35. </CssTransform>

属性

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

点击查看详细参数说明

原文: https://didi.github.io/pile.js/docs/2017/08/develop-components-anime-csstransform.html