console
Vue.component('fade',{
props:['show'],
template:`
<transition @before-enter="handleBeforeEnter"
@enter="handleEnter"
name="act">
<slot v-if="show"></slot>
</transition>
`,
methods:{
handleBeforeEnter(el){
},
handleEnter(el,done){
}
}
})
Vue.component('child-one',{
template:'<div>child-one</div>'
})
var vm = new Vue({
el:'#app',
data:{
type:true,
com:'child',
show:true
},
methods:{
handleClick(){
this.show = !this.show;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.js"></script>
<div id="app">
<fade :show="show"
><h1 >Hello</h1> </fade>
<button @click="handleClick">change</button>
</div>
.act-enter{
opacity:0;
}
.act-enter-active{
transition: opacity 3s;
}
.act-leave-to{
opacity:0;
}
.act-leave-active{
transition: opacity 3s;
}