1.过渡动画：transition内置组件
对单个dom或者组件使用动画时，可以使用transition内置组件
app.vue
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition name="wjm">
<div v-if="isShow">
{{message}}
</div>
</transition>
</div>
</template>
style.css
.wjm-enter-from,
.wjm-leave-to{
opacity: 0;
}
.wjm-enter-to,
.wjm-leave-from{
opacity: 1;
}
.wjm-enter-active,
.wjm-leave-active{
transition: opacity 2s ease;
}
常用的六个类名：
v-enter-from： 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active： 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to： 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡动画完成之后移除。
v-leave-from： 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active： 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to： 离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡动画完成之后移除。
2.animation动画
app.vue
<template>
<div class="app">
<div><button @click="isShow = !isShow">showAndNot</button></div>
<transition name="wjm">
<div class="title" v-if="isShow">{{msg}}</div>
</transition>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data(){
return {
isShow:true,
msg:'hello world'
}
}
}
</script>
<style>
.app{
width: 10vw;
margin:0 auto;
}
.wjm-enter-active{
animation:bounce 1s ease;
}
.wjm-leave-active{
animation: bounce 1s ease reverse;
}
@keyframes bounce {
0% {
transform: scale(0);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
</style>
通过定义帧动画，实现css过渡动画
transition组件属性
type： 分别指定按照哪种动画过渡
mode： 指定动画切换模式 比如在app.vue中：需要的动画效果为两个组件切换
<template>
<div class="app">
<div><button @click="isShow = !isShow">showAndNot</button></div>
<transition name="wjm" mode="out-in">
<div class="title" v-if="isShow">{{msg}}</div>
<div class="title" v-else>this is default</div>
</transition>
</div>
</template>
在不指定mode的情况下，会出现两个组件同时存在的情况，我们指定mode为out-in，则vue会在前一个组件out动画结束后再渲染新组件的in动画，解决了上述问题
appear： 指定初次渲染是否执行动画，默认为false。appear为true时，初次渲染会使用动画效果
3.animate.css库
animate是一个跨平台动画库，对于强调、主页、滑动、注意力引导特别有用；
安装animate.css
npm install animate.css
main.js中引入
import("animate.css")
在vue组件中使用：
<template>
<div class="app">
<div><button @click="isShow = !isShow">showAndNot</button></div>
<transition name="wjm" mode="out-in">
<div class="title" v-if="isShow">{{msg}}</div>
</transition>
</div>
</template>
<style>
.app{
width: 10vw;
margin:0 auto;
}
.wjm-enter-active{
animation:backInUp 1s ease-in;
}
.wjm-leave-active{
animation: backInUp 1s ease-in reverse;
}
</style>
上述组件基于transition和animate.css实现动画，我们需要自定义css类样式，另外一种方法是直接给transition添加属性类名：
home.vue
<template>
<div class="app">
<div><button @click="isShow = !isShow">showAndNot</button></div>
<transition
name="wjm"
mode="out-in"
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<div class="title" v-if="isShow">{{msg}}</div>
</transition>
</div>
</template>
通过enter-active-class指定进入动画，leave-active-class指定离场动画
4.js动画：gsap库
gsap可以通过js为css属性、svg、canvas等设置动画，并且浏览器兼容
安装gsap库：
npm insatll gsap
在app.vue中使用
<template>
<div class="app">
<div><button @click="isShow = !isShow">showAndNot</button></div>
<transition
@enter='enter'
@leave='leave'
:css="false"
>
<div class="title" v-if="isShow">{{msg}}</div>
</transition>
</div>
</template>
<script>
import gsap from 'gsap';
export default {
name: 'Home',
data(){
return {
isShow:true,
msg:'hello world'
}
},
methods:{
beforeEnter(){
console.log('beforeEnter')
},
//done方法：动画执行完会回调done方法，通知js动画执行完毕，进行其他操作
enter(el,done){
gsap.from(el,{
scale:0,
x:200,
onComplete:done
})
},
leave(el,done){
gsap.to(el,{
scale:0,
x:200,
onComplete:done
})
}
}
}
</script>
通过enter、leave等javascript钩子实现动画效果
通过gsap实现数字变化效果
changenum.vue
<template>
<div>
<input type="number" step='100' v-model="counter">
<span>{{showCounter.toFixed(0)}}</span>
</div>
</template>
<script>
import gsap from 'gsap'
export default {
data() {
return {
counter:0,
showCounter:0
};
},
watch:{
counter(newValue){
gsap.to(this,{duration:1,showCounter:newValue})
}
}
};
</script>
