二.Vue3.x（动画）
前言
补充一些官方文档中没有的，但是实际开发中最好需要了解的内容
- transition 标签最终并没有形成真实 dom
- 使用
<transition></transition>包裹，transition 标签有一个 name 属性，可以用来与过渡动画样式绑定 - 默认第一次显示元素的时候是没有动画的，可以添加 appear 属性，使得第一次显示也有动画
1.transition
1.name 绑定过渡样式
:::demo
vue
<template>
<div class="main">
<web-button @click="isShow = !isShow">显示与隐藏</web-button>
<transition name="hello1" :appear="true">
<h1 class="text1" v-if="isShow">Hello,World!!</h1>
</transition>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
isShow: true,
}
},
}
</script>
<style>
.text1 {
background-color: lightblue;
text-align: center;
}
.hello1-enter {
transform: translateX(-100%);
}
.hello1-enter-active {
transition: all 0.5s;
}
.hello1-enter-to {
transform: translateX(0);
}
.hello1-leave {
transform: translateX(0);
}
.hello1-leave-active {
transition: all 0.5s;
}
.hello1-leave-to {
transform: translateX(-100%);
}
</style>:::
2.name 绑定动画样式
:::demo
vue
<template>
<div class="main">
<web-button @click="isShow = !isShow">显示与隐藏</web-button>
<transition name="hello2" :appear="true">
<h1 class="text2" v-if="isShow">Hello,World!!</h1>
</transition>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
isShow: true,
}
},
}
</script>
<style>
.text2 {
background-color: lightblue;
text-align: center;
}
.hello2-enter-active {
animation: hello2-box 0.1s linear;
}
.hello2-leave-active {
animation: hello2-box 0.1s linear reverse;
}
@keyframes hello2-box {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
</style>:::
3.class 绑定过渡样式
:::demo
vue
<template>
<div class="main">
<web-button @click="isShow = !isShow">显示与隐藏</web-button>
<transition
name="hello3"
:appear="true"
enter-class="hello3-enter"
enter-active-class="hello3-enter-active"
enter-to-class="hello3-enter-to"
leave-class="hello3-leave"
leave-active-class="hello3-leave-active"
leave-to-class="hello3-leave-to"
>
<h1 class="text3" v-if="isShow">Hello,World!!</h1>
</transition>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
isShow: true,
}
},
}
</script>
<style>
.text3 {
background-color: lightblue;
text-align: center;
}
.hello3-enter {
transform: translateX(-100%);
}
.hello3-enter-active {
transition: all 0.5s;
}
.hello3-enter-to {
transform: translateX(0);
}
.hello3-leave {
transform: translateX(0);
}
.hello3-leave-active {
transition: all 0.5s;
}
.hello3-leave-to {
transform: translateX(-100%);
}
</style>:::
4.class 绑定动画样式
:::demo
vue
<template>
<div class="main">
<web-button @click="isShow = !isShow">显示与隐藏</web-button>
<transition
name="hello4"
:appear="true"
enter-active-class="enter4"
leave-active-class="leave4"
>
<h1 class="text4" v-if="isShow">Hello,World!!</h1>
</transition>
</div>
</template>
<script>
export default {
name: "MyTest",
data() {
return {
isShow: true,
}
},
}
</script>
<style>
.text4 {
background-color: lightblue;
text-align: center;
}
.enter4 {
animation: hello4-box 0.5s linear;
}
.leave4 {
animation: hello4-box 0.5s linear reverse;
}
@keyframes hello4-box {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
</style>:::
2.transition-group
使用 <transition-group></transition-group> 标签可以包裹多个元素，但是子元素必须配置一个 key，否则报错
:::demo
vue
<template>
<div class="main">
<web-button @click="isShow = !isShow">显示与隐藏</web-button>
<transition-group name="hello" :appear="true">
<h1 class="text" v-if="isShow" :key="1">Hello,World!!</h1>
<h1 class="text" v-if="!isShow" :key="2">Hello,World!!</h1>
</transition-group>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
isShow: true,
}
},
}
</script>
<style>
.text {
background-color: lightblue;
text-align: center;
}
.hello-enter {
transform: translateX(-100%);
}
.hello-enter-active {
transition: all 0.5s;
}
.hello-enter-to {
transform: translateX(0);
}
.hello-leave {
transform: translateX(0);
}
.hello-leave-active {
transition: all 0.5s;
}
.hello-leave-to {
transform: translateX(-100%);
}
</style>:::