如何在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咨询原有库的作者们