一个好像有用的进退场动画插件

最近业务需求，写了一个基于 Vue 的指令插件 anime-orders .

动画指令的诞生

公司有低代码的构建需求, 造完了一套低代码的生产工具后, 有了这么一个简便的动画插件的需求.

(为啥不用transition|transition-group)

因为transition需要在动画的节点外包裹一层, 低代码工具处理起来有点麻烦

且本身是个小成本的事情, 使用transition后会变得更难管理

说了半天, 到底啥是动画指令

anime-orders 是通过 vue.directive 接口实现的 动画的定义和管理 的一个小工具.

talk is cheap. show the code.

一个漂亮的从左侧渐入效果就有了

<template>
    <div v-ani:fade-left="`group 1000 easing 4000`">
</template>

使用时仅需在template中做出如下定义, 就可以轻松实现卡片的入场效果. 是不是很简单?

下面我们来讲解一下这些参数的意义

动画名称

fade-left是动画的名称, 它表明了这个动画如何运行, 是透明度变化还是位置的变化,
anime-orders 使用了animejs作为动画引擎, 所以在定义动画时, 所有animejs能使用的参数, 都可以在anime-orders 里使用, 你也可以参考这份文档

动画分组

group 是用户自己取的分组名称, 它表明了当前动画属于哪个分组, 同名分组的动画可以通过dispatchEnter、dispatchLeave、dispose触发他们的进退场及销毁, 上述三个函数的参数都是group分组名称

一定要注意, 这个插件并不知道你什么时候需要触发退场, 所以记得手动调用 dispose 来销毁动画对象

其他的杂项

1000 是动画的延迟, easing 是动画的缓动函数, 4000 是动画的 duration, 这些参数都是可选的, 不传递一样可以使用指令定义时的参数动起来.如果传了这些参数,就会覆盖定义时的参数

复杂的例子

尽管看上去还不错, 但思来想去, 这东西似乎是个伪需求 不愧是我, 鸡肋+1

最后,祝你快乐.

如果有用的话点个 star 吧： Particaly/anime-orders (github.com)