vue3+ts中使用animejs(hook)

在Vue 3和TypeScript中使用animejs的例子如下：

首先，确保安装了animejs：

npm install animejs

然后，在Vue组件中使用animejs：

<template>
  <div ref="animeElement">Animate Me!</div>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import anime from 'animejs';
 
export default defineComponent({
  setup() {
    const animeElement = ref<HTMLElement | null>(null);
 
    onMounted(() => {
      if (animeElement.value) {
        anime.set(animeElement.value, { opacity: 0 });
 
        anime({
          targets: animeElement.value,
          opacity: 1,
          duration: 1000,
          easing: 'easeOutExpo',
          delay: 1000
        });
      }
    });
 
    return { animeElement };
  }
});
</script>

在上面的代码中，我们使用ref创建了一个响应式引用animeElement，它指向我们想要进行动画处理的DOM元素。在组件挂载后（onMounted钩子中），我们使用anime.set设置了元素的初始状态（透明度为0），然后使用anime函数创建了一个动画，将透明度渐变到1，动画时长为1000毫秒，缓动函数为'easeOutExpo'，并且延迟1000毫秒执行。