1. 作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名
2.图示:
3. 使用步骤:
(1) - 准备好样式
a1: 元素进入的样式:
-------- v-enter: 进入的起点
-------- v-enter-active: 进入过程中
-------- v-enter-to: 进入的终点
a2: 元素离开的样式:
-------- v-leave: 离开的起点
-------- v-leave-active: 离开过程中
-------- v-leave-to: 离开的终点
(2) - 使用
<transition name="hello" appear>
<h1 v-show="isShow">你好啊!</h1>
</transition>
<style>
.hello-enter-active {
animation: hello 0.5s linear;
}
.hello-leave-active {
animation: hello 0.5s linear reverse;
}
@keyframes hello {
from {
transition: translateX(-100%);
}
to {
transition: translateX(0px);
}
}
</style>
(3) - 要让页面一开始就显示动画,需要添加appear
<transition-group name="hello" appear>
<h1 v-show="!isShow">你好啊!</h1>
<h1 v-show="isShow">陈慕夏小盆友</h1>
</transition-group>
(4) - 备注:
若有多个元素需要过度,则需要使用
<transition-group name="hello" appear>
<h1 v-show="!isShow" key="1">你好啊!</h1>
<h1 v-show="isShow" key="2">陈慕夏小盆友</h1>
</transition-group>
(5) - 第三方动画库:Animate.css
<transition-group
appear
name="animate_animated animate_bounce"
enter-active-class="animate_swing"
leave-active-class="animate_backOutUp"
>
<h1 v-show="!isShow" key="1">你好啊!</h1>
<h1 v-show="isShow" key="2">陈慕夏小盆友</h1>
</transition-group>
src/App.vue
<template>
<div>
<Test/>
<Test2/>
<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>
src/components/Test.vue
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition name="hello" appear>
<h1 v-show="isShow">你好啊!</h1>
</transition>
</div>
</template>
<script>
name: 'Test',
data() {
return {
isShow: true
}
}
</script>
<style scoped>
h1 {
background-color: orange;
}
.hello-enter-active {
animation: hello 0.5s linear;
}
.hello-leave-active {
animation: hello 0.5s linear reverse;
}
@keyframes hello {
from {
transition: translateX(-100%);
}
to {
transition: translateX(0px);
}
}
</style>
src/components/Test2.vue
<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>
name: 'Test2',
data() {
return {
isShow: true
}
}
</script>
<style scoped>
h1 {
background-color: orange;
}
//进入的起点,离开的终点
.hello-enter,hello-leave-to{
transition: translateX(-100%);
}
.hello-enter-active,.hello-leave-active {
animation: 0.5s linear;
}
//进入的终点,离开的起点
hello-enter-to,hello-leave {
transition: translateX(0px);
}
</style>
src/components/Test3.vue
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition-group
appear
name="animate_animated animate_bounce"
enter-active-class="animate_swing"
leave-active-class="animate_backOutUp"
>
<h1 v-show="!isShow" key="1">你好啊!</h1>
<h1 v-show="isShow" key="2">陈慕夏小盆友!</h1>
</transition-group>
</div>
</template>
<script>
import 'animate.css'
name: 'Test3',
data() {
return {
isShow: true
}
}
</script>
<style scoped>
h1 {
background-color: orange;
}
</style>
使用动画优化todo-list案例
src/components/MyList.vue
<template>
<ul class="todo-main">
<transtion-group>
<MyItem v-for="todoObj in todoList" :key="todoObj.id" :todoObj="todoObj"/>
</transtion-group>
</ul>
</template>
<script>
import MyItem from './components/MyItem'
export default {
name: 'MyList',
components: {MyItem},
props: ['todoList']
}
</script>
<style scoped>
/*main*/
.todo-main {
margin-left: 0px;
border: 1px solid #ddd;
border-radius: 2px;
paddding: 0px;
}
.todo-empty {
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
.todo-enter-active {
animation: xxx 0.5s linear;
}
.todo-leave-active {
animation: xxx 0.5s linear reverse;
}
@keyframes xxx {
from {
transform: translateX(100%)
}
to {
transform: translateX(0px)
}
}
</style>