vue-animate-plugin

1.0.1 • Public • Published

vue-animate

这是一个VUE插件,安装后提供v-animate指令。基础动画基于velocity-animate包,让写动画特效变得简单方便。

意图

*为什么要做vue-animate插件包?*

在平时的VUE组件开发过程当中,我逐渐发现写动画是一件不那么轻松愉快的事情。官方推荐使用transition节点内部嵌套v-if/v-show绑定的元素的方式来体现元素入场及退场,以及使用初始值到目标值加setTimeout/setInterval的方式实现动画效果。我觉得这样的处理方式还不够简单,那么以现有的手段,能不能有一个指令并且使用该指令来实现状态到视图的同步,而且这样的指令是一个可声明式的可配置的以及可衔接的动画同步指令?

答案是肯定的,我选择了VUE官方推荐的动画包velocity-animate。因为使用了Promiseasync/await语法,使用之前请确保babel插件的配置正确

安装

npm i --save vue-animate-plugin

使用

注册

import Vue from 'vue';
import VueAnimate from 'vue-animate-plugin';

Vue.use(VueAnimate, {
    valueof: ':', // 表示v-animate指令修饰符中键与值使用什么字符分割,默认使用':'
    begin: 'begin', // 表示v-animate指令修饰符中动画开始之前的挂钩点的名称,可以通过方式`.begin:onBegin`注入钩子函数,它可以是async function
    after: 'complete', // 表示v-animate指令修饰符中动画结束之后的挂钩点的名称,`.complete:onComplete`方式注入钩子,它可以是async function
    callback: null // 表示v-animate指令中,动画部分(包括之后的衔接部分)完全执行完毕后的钩子函数注入口
});

当然代码中的options部分一般都不需要特别配置,特殊情况除外。

指令绑定

下面列出了一些需要注意的事项:

  • 指令必须作用在style属性上,就像这样v-animate:style,并且这样的绑定在一个元素上可以写多次。
  • 指令修饰符是一组键值对的集合,值可以是一个单纯的值,也可以是一个当前context内存在的方法名称。
  • 因为使用了velocity-animate,所以状态绑定部分可以直接使用书写velocity的方式书写。

Examples

<div v-animate:style.duration:200.loop:2.delay:1000="{ width: width, height: height }"></div>
// 表示当div插入文档或者绑定的状态width或height变化时,首先停顿一秒,然后做timeout为200毫秒的动画,并且循环播放两次,最后回到初始状态。

<div v-if="show" v-animate:style.duration:200.delay:500="{ height: height, opacity: opacity }"></div>
// 表示当上下文状态show初始值或者变化为true时,动画同步视图,效果是首先停顿500毫秒,然后以timeout为200毫秒的动画,同步height和opacity的值。

<div v-if="show" v-animate:style.duration:200.complete:onTestComplete="{ translateX: test.positionX, opacity: test.opacity }"></div>
// 提供了声明式的元素入场及退场动画,退场时除了首先修改test.positionX和test.opacity状态的值,还需要在当前上下文methods中提供onTestComplete钩子函数,并且实现把状态show赋值为false。

<hr v-animate:style.duration:100.progress:onProgress.complete:onComplete="{ width: width }" />
// 通过在当前上下文中实现钩子函数onProgress可以为进度条提供百分比功能,并且通过实现onComplete钩子函数做进度条的收尾工作。

<div v-animate:style.duration:100.complete:onSizeComplete="{ width: width, height: height }"
     v-animate:style.duration:300.complete:onOpacityComplete="{ opacity: opacity }"
></div>
// 动画是可衔接的,可以通过实现onSizeComplete或者onOpacityComplete钩子函数,改变opacity或者width和height的状态值。

关于钩子函数

指令提供了动画开始前和动画结束后的钩子注入口,可以在指令的修饰符中进行配置。并且注入的钩子可以是普通的function(同步执行)或者是async function(异步串行执行)。

function(veloc, cmd, el, binding, vn, oldvn){}

参数说明:

  1. veloc: 表示已经promise化改造以后的velocity函数,如果要访问原生velocity函数,请调用veloc.naiver。
  2. cmd: 表示animate指令钩子的当前实例。
  3. el: 表示当前涉及到的元素的实例。
  4. binding: 表示指令绑定到元素的信息。比如arg、modifiers、value、oldValue和expression等...
  5. vn: 当前的虚拟节点。
  6. oldvn: 上一个虚拟节点,在元素插入文档时不可用。

参考页面

可以参考具体页面:vue animate page

Package Sidebar

Install

npm i vue-animate-plugin

Weekly Downloads

1

Version

1.0.1

License

ISC

Unpacked Size

8.42 kB

Total Files

4

Last publish

Collaborators

  • lr5420511