veveal v0.1.4

English | 简体中文

安装

npm install veveal --save
# or
yarn add veveal

用法

main.js

import veveal from 'veveal'

Vue.use(veveal);

在组件中

<HelloWorld v-veveal/>

参数

插件设置

例如：

Vue.use(veveal, {
	animate: 'fadeInUp',
  threshold: 0.5,
  distance: 100
});

表示元素 height 有 50% 在页面底部 100px 之上时触发动画

修饰符

• 延迟 (秒)
  • d1 d2 d3 d4 d5
• 速度
  • slow slower fast faster
• 次数
  • infinite
• 动画
  • 动画列表见 animate.css

例如：

<HelloWorld v-veveal.d1.slow.infinite.fadeInUp/>

指令值

除了使用修饰符描述动画，通过设置指令值也是有效的，需要动态设置的情况下能够发挥作用

例如：

<HelloWorld v-for="i in 2" :key="i" v-veveal="i%2?'fadeInLeft':'fadeInRight'" />

License

• MIT