【亲测免费】 VueUse Motion 使用教程

最新推荐文章于 2025-05-16 15:35:13 发布

柏赢安Simona

最新推荐文章于 2025-05-16 15:35:13 发布

阅读量1.6k

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/gitblog_00090/article/details/141048621

VueUse Motion 使用教程

项目介绍

VueUse Motion 是一个基于 Vue.js 的动画库，旨在简化在 Vue 应用中添加动画效果的过程。它提供了一系列的组合函数（composables），使得开发者可以轻松地在组件中添加各种动画效果，如平移、旋转、缩放等。VueUse Motion 的设计理念是让动画开发变得简单、直观且高效。

项目快速启动

安装

首先，你需要在你的 Vue 项目中安装 VueUse Motion：

npm install @vueuse/motion

基本使用

在你的 Vue 组件中引入并使用 VueUse Motion：

<template>
  <div v-motion="'fadeIn'">
    这是一个简单的淡入动画示例。
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useMotion } from '@vueuse/motion';

export default defineComponent({
  setup() {
    useMotion('fadeIn', {
      initial: { opacity: 0 },
      enter: { opacity: 1 },
    });
  },
});
</script>

应用案例和最佳实践

案例一：页面加载动画

在页面加载时，使用 VueUse Motion 添加一个渐入效果：

<template>
  <div v-motion="'pageLoad'">
    欢迎来到我的网站！
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useMotion } from '@vueuse/motion';

export default defineComponent({
  setup() {
    useMotion('pageLoad', {
      initial: { opacity: 0, y: 20 },
      enter: { opacity: 1, y: 0 },
    });
  },
});
</script>

案例二：按钮点击动画

在按钮点击时，添加一个缩放效果：

<template>
  <button v-motion="'buttonClick'" @click="handleClick">
    点击我
  </button>
</template>

<script>
import { defineComponent } from 'vue';
import { useMotion } from '@vueuse/motion';

export default defineComponent({
  setup() {
    useMotion('buttonClick', {
      initial: { scale: 1 },
      tap: { scale: 0.9 },
    });

    const handleClick = () => {
      console.log('按钮被点击了！');
    };

    return { handleClick };
  },
});
</script>