Vue 封装的过渡和动画
1. 作用
在插入、更新或移出DOM元素时，在合适的时候给元素添加样式类名。
2. 图示
3. 准备好样式
元素进入的样式
- v-enter：进入的起点
- v-enter-active：进入的过程中
- v-enter-to：进入的终点
元素离开的样式
- v-leave：离开的起点
- v-leave-active：离开的过程中
- v-leave-to：离开的终点
4. 包裹要过渡的元素
使用 transition 包裹要过渡的元素，并配置 name 属性
<transition name='hello'>
<h3 v-show='isShow'>Hello</h3>
</transition>
注意：若有多个元素需要过渡，则需要使用
<transition-group>，且每个元素都要指定 key 值。
实例：动画效果实现动画
Vue动画效果
先在
@keyframes xxx {}中准备好动画效果，再包裹要动画的元素。
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition appear>
<h3 v-show="isShow">Hello~</h3>
</transition>
</div>
</template>
<script>
export default {
name: "myTest",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h3 {
background-color: orange;
}
.v-enter-active {
animation: demo 0.5s linear;
}
.v-leave-active {
animation: demo 0.5s linear reverse;
}
@keyframes demo {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0px);
}
}
</style>
实例：过渡效果实现动画
实现相同的效果
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition-group name='hello' appear>
<h3 v-show="!isShow" key="1">Hello~</h3>
<h3 v-show="isShow" key="2">Vue~</h3>
</transition-group>
</div>
</template>
<script>
export default {
name: "myTest",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h3 {
background-color: orange;
}
/* 进入的起点 离开的终点*/
.hello-enter, .hello-leave-to{
transform: translateX(-100%);
}
.hello-enter-active, .hello-leave-active{
transition: 0.5s linear;
}
/* 进入的终点 离开的起点*/
.hello-enter-to, .hello-leave{
transform: translateX(0);
}
@keyframes atguigu {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0px);
}
}
</style>
实例：引入第三方库实现动画
- 第三方库 | 链接地址
- 在终端键入
$ npm install animate.css命令- 按要求选择配置
<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"
>
<h3 v-show="!isShow" key="1">Hello~</h3>
<h3 v-show="isShow" key="2">Vue~</h3>
</transition-group>
</div>
</template>
<script>
import "animate.css";
export default {
name: "myTest",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h3 {
background-color: orange;
}
/* 进入的起点 离开的终点*/
.hello-enter,
.hello-leave-to {
transform: translateX(-100%);
}
.hello-enter-active,
.hello-leave-active {
transition: 0.5s linear;
}
/* 进入的终点 离开的起点*/
.hello-enter-to,
.hello-leave {
transform: translateX(0);
}
@keyframes atguigu {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0px);
}
}
</style>
不积跬步无以至千里 不积小流无以成江海