<template>
<div >
<button @click="show = !show">click</button>
<my-special-transition>
<p v-if="show">hello</p>
</my-special-transition>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('my-special-transition', {
template: '\
<transition\
name="very-special-transition"\
mode="out-in"\
v-on:before-enter="beforeEnter"\
v-on:after-enter="afterEnter"\
>\
<slot></slot>\
</transition>\
',
methods: {
beforeEnter: function (el) {
console.log(el);
},
afterEnter: function (el) {
console.log(el);
}
}
})
export default{
components: {
},
data() {
return {
show: true,
}
},
methods:{
}
}
</script>
<style >
</style>
07-14
461
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
09-30
2006
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
01-20
4万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)