Vue中动画的实现从基本动画，到炫酷动画。看这一篇就够了

2023-10-12 01:47| 来源: 网络整理| 查看: 265

文章目录 Vue中的基本动画实现动画类名的重定义使用第三方的动画库我就选择其中一个库做示范其他都一样

Vue中的基本动画实现

直接一点，基本动画的步骤

在需要加动画的地方，加入transition 我是一只小小鸟

在style中写vue已定义好的类名

进入前和结束后的状态 .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段 .v-enter-active,.v-leave-active{ transition: all 0.5S ease }

这样就已经完成了基本动画了，上完整代码

Document 进入前和结束后的状态 .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段 .v-enter-active,.v-leave-active{ transition: all 0.5S ease } 显示/隐藏我是一只小小鸟 new Vue({ el:'#box', data:{ isNum :true }, methods: { tags(){ this.isNum=!this.isNum; } }, }) 动画类名的重定义

只需要在transition标签上添加一个name属性，然后把类名中v改成你定义的类名就可以了

我是一只小小鸟进入前和结束后的状态 .my-enter,.my-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段 .my-enter-active,.my-leave-active{ transition: all 0.5S ease } 使用第三方的动画库

第三方的动画库有很多 Animate、Anicollection、Cssshake、Animatable、Hover、Animations、JXAnimate、Spinkit、Velocity动画、AlloyStick骨骼动画引擎、Rocket、Cssynth、Stylie、Dynamicsjs、Anijs、Animsition、Parallax、Wow、Bouncejs、Easie、Greensock

我就选择其中一个库做示范其他都一样在使用第三方库之前，需要在，你要做动画的标签上加个基本类 animated，这个基本类是根据每个库不一样而定的，我们要用Animated，所以需要加我是一只小小鸟

接着就是引入第三方库，你们可以下载。我比较懒，我就直接npm下载了。

npm install animate.css --save

然后引入文件

写上类名，就行了，，提示，千万别下错文件，不然动画也无法实现

我是一只小小鸟

还有别的动画慢慢更新

【本文地址】

公司简介

联系我们

Vue中动画的实现 从基本动画，到炫酷动画。看这一篇就够了

Vue中动画的实现从基本动画，到炫酷动画。看这一篇就够了