X-BUILD

X-ANIMATE

通过屏幕滚动实现执行动画，支持延时动画、控制动画执行时间、执行偏移量、生命周期回调、动画组，完美支持Animate.css。

安装

  • 通过 npm or yarn 安装：
npm install animate.css x-animate --save

引用

  • 通过包管理器安装：
// javascript
import 'animate.css'
import XAnimate from 'x-animate'
const xAnimate = new XAnimate();
xAnimate.init();

本项目通过 rollup 使用 UMD 格式打包，支持 AMD、CommonJS、script 标签引入，下载源码

起步

为至少一个 DOM 添加 animate 属性，并赋值一个动画名称，例如：

<!-- html -->
<div animate="bounceInLeft"></div>

单元素动画

只对单个元素生效的动画，当滚动到它的相应位置就会被执行：

<!-- html -->
<div animate="[animate-name]" 
     delay="1000" 
     duration="1000" 
     offset="100" 
     animateEnter="animateEnterFn" 
     animateLeave="animateLeaveFn"
></div>

animate*

none <String>

参考 animate.css 动画名，或参考自定义动画。

delay

0(ms) <Number>

延时：当屏幕滚动到对应位置时，延时结束执行动画。

duration

1000(ms) <Number>

持续时间：动画执行的持续时间，数值越大动画越慢。

offset

0(px) <Number>

偏移量：以屏幕底部为轴，默认滚动到某一元素已显示一半高度时执行动画。偏移量为正数，则需多滚动相应的距离；偏移量为负值，则会提前相应距离执行动画。

animateEnter(item)

none <Function>

生命周期函数：当某个元素动画开始时执行函数。

animateLeave(item)

none <Function>

生命周期函数：当某个元素动画结束时执行函数。

动画组

当滚动到某个区域需要它里面的子元素做连续动画时（例如为地图标记点做连续动画）：

<!-- html -->
<div animate-group>
  <div animateItem="[animate-name]"></div>
</div>

animate-group*

为一个动画组的父元素添加此属性。

animateItem*

动画名，同时子元素支持单元素的所有属性。

绑定生命周期函数

在需要触发的元素上增加属性 animate-enter (动画前)或 animate-leave (动画后)，值为定义在 methods 中的函数名。

<!-- html -->
<div animate-enter="animateEnter" animate-leave="animateLeave"></div>

将需要执行的函数定义在 methods 中：

// javascript
let xAnimate = new XAnimate({
  methods: {
    animateEnterFn(item) {
      console.log('animateEnter', item);
    },
    animateLeaveFn(item) {
      console.log('animateLeave', item);
    }
  }
});

自定义动画

使用自定义的动画，例如新定义 newAnimate 动画:

/* css */
@keyframes newAnimate {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.newAnimate {
  animation-name: newAnimate;
}

<!-- html -->
<div animate="newAnimate"></div>

其他配置

// javascript
const xAnimate = new XAnimate({
  // 默认值'animate'，对应<div animate=""></div>，防止与其他插件命名冲突
  name: 'animate',
  // 默认值'delay'，对应<div delay=""></div>，防止与其他插件命名冲突
  delay: 'delay',
  // 默认值'duration'，对应<div duration=""></div>，防止与其他插件命名冲突
  duration: 'duration'
});

← X-TOUCH →