单元素/组件的过渡
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
- 条件渲染 (使用
v-if)- 条件展示 (使用
v-show)- 动态组件
- 组件根节点
这里是一个典型的例子：
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单元素/组件的过渡</title>
<script src="./vue.js"></script>
<style>
.fade-enter-active,.fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active 低于 2.1.8版本 */ {
opacity: 0;
}
</style>
</head>
<body>
<div id="hzh">
<button v-on:click="show = !show">
切换
</button>
<transition name="fade">
<p v-if="show">你好！我是黄子涵！</p>
</transition>
</div>
<script>
new Vue({
el: '#hzh',
data: {
show: true
}
})
</script>
</body>
当插入或删除包含在
transition组件中的元素时，Vue 将会做以下处理：
- 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
- 如果过渡组件提供了 JavaScript钩子函数，这些钩子函数将在恰当的时机被调用。
- 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的
nextTick概念不同)
