自动过渡动画 - AutoAnimate 库

本文主要是介绍自动过渡动画 - AutoAnimate 库，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文给大家介绍一个一行代码添加过渡动画的库。

介绍

AutoAnimate是一个零配置、投入式动画实用程序，可以为您的Web应用程序添加平滑的过渡。您可以将其与React、Solid、Vue、Svelte或任何其他JavaScript应用程序一起使用。

官方地址： https://auto-animate.formkit.com/

github 地址: https://github.com/formkit/auto-animate

简而言之，AutoAnimate 是一个能够一行代码直接添加过度动画的库，无需再去了解繁杂的 css 属性，以及动画相关的知识。

在一些快速验证的场景中尤其适用。

本文主要介绍在 vue 中的使用方式。

安装

安装依赖

yarn add @formkit/auto-animate

注册指令

import { createApp } from 'vue'
import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
import App from 'App.vue'createApp(App).use(autoAnimatePlugin).mount('#app')

当然，你也可以直接引入使用

import { vAutoAnimate } from '@formkit/auto-animate'。

基本使用

插件注册之后即可在你需要动态变化的元素（主要是循环中的元素）的父元素中使用v-auto-animate 即完成，非常地简单，以下为官方示例：

<script setup>
import { ref } from 'vue'
const items = ref(["😏","😐","😑","😒","😕", ... ])
function removeItem(toRemove) {items.value = items.value.filter((item) => item !== toRemove)
}
</script><template><h5>Click emojis to remove them.</h5><ul v-auto-animate><liv-for="item in items":key="item"@click="removeItem(item)">{{ item }}</li></ul>
</template>

运行可得以下结果：

在这里插入图片描述
一个循环列表删除单条的动画就自动加上去了，无需再用其他的什么操作

进阶使用

AutoAnimate 不仅对普通列表生效；

同时也对卡片、横纵坐标盒子，甚至交换位置的列表项生效

例如如下动画：（来自官方）
在这里插入图片描述
其核心代码与普通使用方法一致

 <div class="boxes" v-auto-animate="{ duration: 500 }">

替换自带的动画

如果对它自带的动画和过度方式不满意，也可以将它替换掉，只需要引入AutoAnimate 方法，并修改其内容重新定义 add、remove、remain的动画帧即可。

import autoAnimate, { getTransitionSizes } from '@formkit/auto-animate'autoAnimate(parentElement, (el, action, oldCoords, newCoords) => {let keyframes// supply a different set of keyframes for each actionif (action === 'add') {keyframes = [{ transform: 'scale(0)', opacity: 0 },{ transform: 'scale(1.15)', opacity: 1, offset: 0.75 },{ transform: 'scale(1)', opacity: 1 }]}if (action === 'remove') {// ...}if (action === 'remain') {// ...}return new KeyframeEffect(el, keyframes, { duration: 600, easing: 'ease-out' })
}))