<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue中多個元素或組件的過渡</title>
<script src="vue.js"></script>
<script src="velocity.js"></script>
<style type="text/css">
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
transition: opacity 0.5s;
}
</style>
</head>
<body>
<div id="app">
<!--3：使用動畫效果進行兩個組件的切換-->
<transition mode="out-in">
<!--2：通過type來判斷顯示哪一個組件-->
<comment :is="type"></comment>
</transition>
<button type="button" @click="handleBtn">出現/隱藏</button>
</div>
<script>
/*1:定義兩個組件*/
Vue.component('child',{
template:'<div>child</div>'
})
Vue.component('child-one',{
template:'<div>child-one</div>'
})
var vm=new Vue({
el:'#app',
data:{
type:'child'
},
methods:{
handleBtn:function(){
this.type=this.type==='child'?'child-one':'child'
}
}
})
</script>
</body>
</html>
