快速上手基于Vue的动画引擎vueuse/motion

在现代前端开发中，动画可以极大地提升用户体验和界面美感。VueUse Motion 是一个强大的动画库，旨在为 Vue 应用提供简单易用的动画功能。那我们就来看看它在Vue项目中是如何应用的，快速手上为主，官网地址👇

@vueuse/motion · @vueuse/motionhttps://motion.vueuse.org/

1.先在桌面创建一个新文件夹（名字随意），右击选择vscode编辑器打开🤪

2.vscode打开之后，调出终端（快捷键：Ctrl+`），先输入npm --version和vue --version命令确保npm和vue/cli都已安装🤣

3.然后使用vue create vue_test命令，使用vue脚手架创建一个名为vue_test的vue项目（名字随意）👈

4.创建开始时会询问我们项目是使用vue2还是vue3，这里选择vue3回车默默等待即可😁

5.如何看到下面这两行英文就说明创建项目成功了。下面也给出了两行蓝色的命令提示，逐步操作即可，直到看到浏览器页面中有内容呈现说明创建成功了🎉🎉

6.然后通过npm add @vueuse/motion命令下载动画需要的包和依赖🤣

7.下载完之后找到main.js入口文件，改成如下代码👇

//main.js入口文件
import { createApp } from 'vue'
import App from './App.vue'
import { MotionPlugin } from '@vueuse/motion'  //引入动画插件
const app = createApp(App)
app.use(MotionPlugin)                          //允许使用插件
app.mount('#app')

8.紧接着找到App.vue文件来举例，我们使用最简单的一种方式就是插件封装好的动画效果，可在官网找到动画效果，选一个喜欢的直接拿来用即可，下面代码就是简单的使用例子(可将默认代码删除，以免影响观看效果)🤗

// App.vue主组件文件
<script>

</script>

<template>
  <div class="target" v-motion-fade>1</div>           //第一个动画元素
  <div class="target" v-motion-fade-visible>2</div>   //第二个动画元素
</template>

<style>
//给两个元素简单上点样式，好观察动画效果
.target {
  width: 100px;
  height: 100px;
  margin: 300px auto 500px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #43b883;
  border-radius: 10px;
  font-weight: bold;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

9.最后一步，保持以上两个代码文件之后，回到浏览器点击刷新页面即可看到动画效果啦，是不是很神奇，很方便😜

创作不易，如果文章对同学们有帮助的话别忘了给我点个关注和收藏哦😘😘😘