1、作用
在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名。
2、图示
3、写法
1.准备好样式:
元素进入的样式:
1. v-enter:进入的起点(过度:进入的起点为离开的终点 可一起写)
2. v-enter-active:进入过程中(用动画写)
3. v-enter-to:进入的终点
元素离开的样式:
1. v-leave:离开的起点
2. v-leave-active:离开过程中(用动画写)
3. v-leave-to:离开的终点
2.使用<transition>包裹要过度的元素,并配置name属性:
<transition name= "hello" >
<h1 v-show=" isShow" >你好啊! </h1>
</transition>
3.备注:若有多个元素需要过度,则需要使用: <transition-group>,且每个元索都要指定key值。
App组件
<template>
<div>
<Test></Test>
<Test2></Test2>
<Test3></Test3>
</div>
</template>
<script>
import Test from './components/Test'
import Test2 from './components/Test2'
import Test3 from './components/Test3'
export default {
name:'App',
components:{Test,Test2,Test3},
}
</script>
Test组件(动画)
<!-- 动画 -->
<template>
<div>
<button @click="isShow=!isShow">显示/隐藏</button>
<transition name="hello" appear>
<h1 v-show="isShow">你好啊!</h1>
</transition>
</div>
</template>
<script>
export default {
name:'Test',
data(){
return {
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: orange;
}
/* 动画进 */
.hello-enter-active{
animation: atguigu 1s linear;
}
.hello-leave-active{
animation: atguigu 1s reverse;
}
/* 动画名 */
@keyframes atguigu {
/* 来的位置 */
from{
transform: translateX(-100%);
}
/* 停的位置 */
to{
transform: translateX(0px);
}
}
</style>
Test2(过度)
<!-- 过度 -->
<template>
<div>
<button @click="isShow=!isShow">显示/隐藏</button>
<transition-group name="hello" appear>
<h1 v-show="isShow" :key="1">你好啊!</h1>
<h1 v-show="isShow" :key="2">人世间</h1>
</transition-group>
</div>
</template>
<script>
export default {
name:'Test',
data(){
return {
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: orange;
}
/* 进入的起点 离开的终点*/
.hello-enter,.hello-leave-to{
transform: translateX(-100%);
}
.hello-enter-active,.hello-leave-to{
transition: 0.5s linear;
}
/* 进入的终点 离开的起点*/
.hello-enter-to,.hello-leave{
transform: translateX(0);
}
</style>
Test3(过度:外部API)
<!-- 过度 -->
<template>
<div>
<button @click="isShow=!isShow">显示/隐藏</button>
<transition-group
name="animate__animated animate__bounce"
appear
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp"
>
<h1 v-show="isShow" :key="1">你好啊!</h1>
</transition-group>
</div>
</template>
<script>
import 'animate.css'
export default {
name:'Test',
data(){
return {
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: orange;
}
</style>