项目里用需要用到亿点小动画，找了找发现Anime.js符合我要求，于是就耍耍咯。

开始的时候遇到了一点小问题，解决之后分享一下配置。

照惯例，先贴文档：

中文文档：
anime.js官网_免费、灵活的轻型JavaScript动画库 | animejs (fer-link.com)
英文文档：
animejs.com/
Github：
juliangarnier/anime: JavaScript animation engine (github.com)

文档里都给出了在传统html页面中的使用方式，但vue有那么一点点不同

安装

这里使用yarn，使用其他包管理器的可以自行替换

yarn add animejs
yarn add @types/animejs

注意，这里的**@types/animejs** 如果不引入的话，import时会提示找不到anime

引入

// 如果提示 “anime具有隐式any类型”，可以使用下一行的 “//@ts-ignore” 屏蔽
// @ts-ignore
import anime from 'animejs';

//如果不引入@types/animejs，则可以照着readme.md里这样写,但我没有测试过不知道行不行
//import anime from 'animejs/lib/anime.es.js';

使用

随手抄一个文档里的举例

anime({
  targets: '.dir-normal',
  translateX: 250,
  easing: 'easeInOutSine'
});

需要注意的是，以上代码不能直接在<script setup>中定义，需要定义在方法中，或者在onMounted中初始化，否则动画将不会生效。

一个正确的示例：

<template>
    <div class="bg"></div>
</template>

<script setup>
    // @ts-ignore
    import anime from 'animejs';
    let bgAnimate:anime.AnimeInstance
    onMounted(() => {
        bgAnimate = anime({
            targets: '.bg',
            translateX: 250,
            easing: 'easeInOutSine'
        });
    })
</script>

猜测可能是在setup阶段anime.js无法获取到dom导致的，因此同理，所有会在setup阶段执行的方法中也不能使用anime.js。