Vue中的基本动画实现
直接一点，基本动画的步骤
- 在需要加动画的地方，加入transition
<transition>
<P v-if="isNum">我是一只小小鸟</P>
</transition>
在style中写vue已定义好的类名
进入前和结束后的状态
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(80px);
}
进入和离开的动画时间段
.v-enter-active,.v-leave-active{
transition: all 0.5S ease
}
这样就已经完成了基本动画了，上完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<style>
进入前和结束后的状态
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(80px);
}
进入和离开的动画时间段
.v-enter-active,.v-leave-active{
transition: all 0.5S ease
}
</style>
</head>
<body>
<div id="box">
<button @click="tags">显示/隐藏</button>
<transition>
<P v-if="isNum">我是一只小小鸟</P>
</transition>
</div>
<script>
new Vue({
el:'#box',
data:{
isNum :true
},
methods: {
tags(){
this.isNum=!this.isNum;
}
},
})
</script>
</body>
</html>
动画类名的重定义
只需要在transition标签上添加一个name属性，然后把类名中v改成你定义的类名就可以了
<transition name='my'>
<P v-if="isNum">我是一只小小鸟</P>
</transition>
进入前和结束后的状态
.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，所以需要加
<transition name='my'>
<P v-if="isNum" class="animated">我是一只小小鸟</P>
</transition>
接着就是引入第三方库，你们可以下载。
我比较懒，我就直接npm下载了。
npm install animate.css --save
然后引入文件
<link rel="stylesheet" href="../node_modules/animated/lib/Animated.js">
写上类名，就行了，，提示，千万别下错文件，不然动画也无法实现
<!-- 进入用lightSpeedIn 离开用 lightSpeedOut -->
<transition enter-active-class="lightSpeedIn" leave-active-class ="lightSpeedOut">
<P v-if="isNum" class="animated">我是一只小小鸟</P>
</transition>
还有别的动画慢慢更新
