指令 - 如何在Vue 2上使用AutoAnimate动画库？

Question

AutoAnimate 这个动画库怎么在vue2上使用，注册成指令

import { vAutoAnimate } from '@formkit/auto-animate'Vue.directive("auto-animate",vAutoAnimate)

            <ul @click.stop="" v-auto-animate="{ duration: 1000 }">                <li class="contextmenuLi" @click="cls = !cls">                    <i class="el-icon-folder-delete"></i>                    点击                </li>                <li class="contextmenuLi" v-show="cls">                    <i class="el-icon-folder-delete"></i>                    出现                </li>             </ul>

没有动画效果，也没有报错不知道是为什么

想在vue2上使用这个@formkit/auto-animate 这个动画库

Answer 1

通过在main.js中打印vAutoAnimate会发现它是一个使用vue3语法实现的指令，所以在vue2中无法实现原有的动画效果。在node_modules\@formkit\auto-animate\index.mjs中修改原有代码

const vAutoAnimate = {    bind: (el, binding) => {        autoAnimate(el, binding.value || {});    },    update: (el, binding) => {        autoAnimate(el, binding.value || {});    },    mounted: (el, binding) => {        autoAnimate(el, binding.value || {});    },    // ignore ssr see #96:    getSSRProps: () => ({}),};

可以看到效果的出现，但这种更改实现破坏了原有库的代码，也未测试过功能的影响，建议换用其他库或者提issue咨询原有库的作者们