1. 多个标签被transition包裹，并且用v-if 和 v-else
<style>
.fade-enter,
.fade-leave-to {
opacity: 0
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s
}
</style>
</head>
<body>
<div id="demo">
<button @click="show = !show">click me</button>
<transition name="fade">
<div v-if="show">sfsf</div>
<div v-else>hello</div>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
},
})
</script>上述代码并没有过渡效果，因为div标签复用了。所以必须使用key值，不让标签复用
<transition name="fade">
<div v-if="show" key="sfsf">sfsf</div>
<div v-else key="hello">hello</div>
</transition>效果：进的在进，出的在出，进出同时
还可以再transition标签中设置mode属性：mode=“in-out”，效果：进的先进，出的再出
<transition name="fade" mode="in-out">
<div v-if="show" key="sfsf">sfsf</div>
<div v-else key="hello">hello</div>
</transition
