Vue 封装的过度与动画
作用:在插入、更新、移除 DOM 元素时,在合适的时候给元素添加样式类名
写法
首先准备好样式
元素进入的样式
v-enter
:进入的起点v-enter-active
:进入过程中v-enter-to
:进入的终点
元素离开的样式
v-leave
:离开的起点v-leave-active
:离开过程中v-leave-to
:离开的终点
使用 transition
包裹要过度的元素,并配置其 name 属性
<transition name="hello">
<h2 v-show="isShow" class="come">你好</h2>
</transition>
如果有多个元素需要过度,则需要使用 transition-group
进行包裹
实例
App.vue
<template>
<div>
<MyTest/>
</div>
</template>
<script>
import MyTest from "@/components/MyTest";
export default {
name: 'App',
components: {MyTest}
}
</script>
<style>
</style>
MyTest.vue
<template>
<div>
<button @click="isShow = !isShow">显示 / 隐藏</button>
<transition name="hello" appear>
<h2 v-show="isShow" class="come">你好</h2>
</transition>
</div>
</template>
<script>
export default {
name: "MyTest",
data() {
return {
isShow: true
}
}
}
</script>
<style scoped>
h2 {
background-color: #a6d49d;
}
/*进入的起点和离开的终点*/
.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);
}
/*.hello-enter-active {*/
/* animation: hello 1s;*/
/*}*/
/*.hello-leave-active {*/
/* animation: hello 1s reverse;*/
/*}*/
/*@keyframes hello {*/
/* from {*/
/* transform: translateX(-100%);*/
/* }*/
/* to {*/
/* transform: translateX(0);*/
/* }*/
/*}*/
</style>