Vue过渡效果的实现
1、Vue 过渡组件
Vue 在插入、更新或者移除 DOM 时，使用内置的过渡封装组件可以实现过渡效果
语法格式：
<transition name = "xx">
<div></div>
</transition>2、过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换：
- v-enter：进入过渡的开始状态
- v-enter-active：进入过渡生效时的状态
- v-enter-to：进入过渡的结束状态
- v-leave：离开过渡的开始状态
- v-leave-active：离开过渡生效时的状态
- v-leave-to：离开过渡的结束状态
完整示例：
<template>
<div>
<div id="demo">
<button v-on:click="show = !show">
显示/隐藏
</button>
<transition name="fades">
<p v-if="show">hello</p>
</transition>
</div>
</div>
</template>
<script>
export default {
data () {
return {
show: true
}
}
}
</script>
<style>
.fades-enter-active, .fades-leave-active {
transition: opacity 1s
}
.fades-enter, .fades-leave-to {
opacity: 0
}
.fades-leave, .fades-enter-to {
opacity: 1
}
</style>运行效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录