在现代前端开发中，动画可以极大地提升用户体验和界面美感。VueUse Motion 是一个强大的动画库，旨在为 Vue 应用提供简单易用的动画功能。那我们就来看看它在Vue项目中是如何应用的，快速手上为主，官网地址👇
@vueuse/motion · @vueuse/motion
https://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.最后一步，保持以上两个代码文件之后，回到浏览器点击刷新页面即可看到动画效果啦，是不是很神奇，很方便😜
创作不易，如果文章对同学们有帮助的话别忘了给我点个关注和收藏哦😘😘😘