在需要添加动画的标签外面用 transition 包裹起来，通过VUE封装的过渡与动画(在插入、更新或者移除DOM的时候给元素添加样式类名)。
一共有6个class切换
- 元素进入样式(Enter过程)
- v-enter 进入的起点
- v-enter-active 进入的过程中
- v-enter-to 进入的终点
- 元素离开样式(Leave过程)
- v-leave 离开的起点
- v-leave-active 离开的过程中
- v-leave-to 离开的终点
单组件过渡
需要注意的点是transition标签没有name属性那么，可以直接在style中用 v-enter-active等默认样式，如果有name属性，需要用 name的值对于的样式。transition中有appear标签说明DOM节点挂载的时候也会有对应的动画。
<template>
<div>
<button @click="isShow=!isShow">隐藏/显示</button>
<transition name="fade">
<h1 v-show="isShow">SingleAnimation</h1>
</transition>
</div>
</template>
<script>
export default {
name:"SingleComponent",
data() {
return {
isShow:true,
}
},
methods:{
}
}
</script>
<style>
/* name是fade, 所以需要用fade-enter-active
如果是没有name标签,可以用v-enter-active默认样式
*/
.fade-enter-active, .fade-leave-active{
transition: opacity 0.5s
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
效果演示：
CSS过渡
利用CSS来实现过渡状态
<template>
<div>
<button @click="isShow=!isShow">隐藏/显示</button>
<transition name="slide">
<h1 v-show="isShow">CssTransition</h1>
</transition>
</div>
</template>
<script>
export default {
name:"CssTransition",
data() {
return {
isShow:true
}
}
}
</script>
<style>
.slide-enter-active {
transition: all 1s ease;
}
.slide-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-enter, .slide-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>
效果演示
CSS动画
利用CSS动画实现DOM节点出现消失时的动画
<template>
<div>
<button @click="isShow=!isShow">隐藏/显示</button>
<transition name="bounce">
<p v-show="isShow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
</transition>
</div>
</template>
<script>
export default {
name:"CssAnimation",
data() {
return {
isShow:true
}
},
}
</script>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
效果演示：
自定义过渡类名(第三方动画库)
可以利用一下attribute来自定义过渡类名实现过渡动画
- enter-class
- enter-active-class
- enter-to-class
- leave-class
- leave-active-class
- leave-to-class
引用第三方库Animate.css ，引用第三方库可以参考文档内容
-
安装Animate.css
npm install animate.css -
导包
import 'animate.css' -
添加class标签
这里的animate_animated 是必须的，后面是指定的动画样式名，如animate_bounce、animate_slideInLeft等
<h1 class="animate__animated animate__bounce">An animated element</h1>
VUE中使用Animate.css
动画可以在Animate.css上提前预览后复制类名
实际代码
<template>
<div>
<button @click="isShow=!isShow">隐藏/显示</button>
<transition name="animate__animated animate__bounce"
enter-active-class="animate__bounceInDown"
leave-active-class="animate__bounceOutDown">
<h1 v-show="isShow">CustomAnimation</h1>
</transition>
</div>
</template>
<script>
import 'animate.css'
export default {
name:"CssAnimation",
data() {
return {
isShow:true
}
},
}
</script>
<style>
</style>
样式效果
多组件动画
当transition中有多个DOM元素的时候，只显示一个标签
<template>
<div>
<button @click="isShow1=!isShow1">隐藏/显示1</button>
<button @click="isShow2=!isShow2">隐藏/显示2</button>
<transition name="animate__animated animate__bounce"
enter-active-class="animate__bounceInDown"
leave-active-class="animate__bounceOutDown">
<p v-show="isShow1" key="001">GroupTransition1</p>
<p v-show="isShow2" key="002">GroupTransition2</p>
</transition>
</div>
</template>
<script>
export default {
name:"GroupTransition",
data() {
return {
isShow1:true,
isShow2:true,
}
},
}
</script>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
只显示第一个DOM元素
如果需要在transition内使用多个DOM节点，可以通过tansition-group来实现
<template>
<div>
<button @click="isShow1=!isShow1">隐藏/显示1</button>
<button @click="isShow2=!isShow2">隐藏/显示2</button>
<transition-group appear
name="animate__animated animate__bounce"
enter-active-class="animate__bounceInDown"
leave-active-class="animate__bounceOutDown">
<h1 v-show="isShow1" key="001">GroupTransition1</h1>
<h1 v-show="isShow2" key="002">GroupTransition2</h1>
</transition-group>
</div>
</template>
<script>
import 'animate.css'
export default {
name:"GroupTransition",
data() {
return {
isShow1:true,
isShow2:true,
}
},
}
</script>
<style>
</style>
演示效果：
