~~~ <div id="app"> <fade :show="show"> <div>hello world</div> </fade> <button @click="handleClick">add</button> </div> <script> Vue.component('fade',{ props:['show'], template:` <transition> <slot v-if="show"></slot> </transition> ` }) var vm = new Vue({ el: "#app", data: { show:true }, methods: { handleClick() { this.show = !this.show; } } }) </script> ~~~ ~~~ .v-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: opacity 2s; } ~~~