菜鸟教程
教程 animejs tutorial

与 Vue 集成使用

Anime.js 非常适合与 Vue 组件配合使用，常见用法包括：

  • 在组件 mounted 钩子中初始化动画
  • 在事件（如点击、鼠标悬停）中触发动画
  • 与 ref 或 v-bind:class 等 Vue 特性结合使用

示例：点击按钮让方块移动

在 Vue 中使用 Anime.js 时，只需通过 ref 获取 DOM 元素，并在事件或生命周期中调用动画函数即可。

html 
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>Anime.js 与 Vue 集成示例</title>
  <style>
    #app {
      text-align: center;
      margin-top: 80px;
    }

    .box {
      width: 80px;
      height: 80px;
      background-color: #4FC08D;
      border-radius: 8px;
      margin: 20px auto;
    }

    button {
      padding: 8px 16px;
      font-size: 16px;
      background-color: #4FC08D;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    button:hover {
      background-color: #3a9d6f;
    }
  </style>
</head>

<body>
  <div id="app">
    <div ref="box" class="box"></div>
    <button @click="play">点击播放动画</button>
  </div>

  <!-- Vue CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <!-- Anime.js CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
  <script>
    const { createApp, ref, onMounted } = Vue;

    createApp({
      setup() {
        const box = ref(null);

        const play = () => {
          anime({
            targets: box.value,
            translateX: 250,
            duration: 800,
            easing: 'easeInOutQuad'
          });
        };

        return { box, play };
      }
    }).mount('#app');
  </script>
</body>

</html>

`

小结

Anime.js 可以无缝用于 Vue 2/3 项目中，建议结合 Vue 的响应式和生命周期特性，实现灵活的组件动效。

相关内容