<style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition:opacity 1s; } </style> <div> <transition> <div v-if='show'>hello world</div> </transition> <button @click='handleClick'>切换</button> </div> <script> var vm = new Vue({ el:'#app', data:{ show:true }, methods:{ handleClick:function(){ this.show = !this.show; } } }) </script>
有时候这种渐隐渐现的效果用的比较多，要复用，需要封装一下，怎么封装呢
<style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition:opacity 1s; } </style> <div> <fade :show='show'> <div>hello world</div> </fade> <fade :show='show'> <h1>hello world</h1> </fade> <button @click='handleClick'>切换</button> </div> <script> Vue.component('fade',{ props:['show'], template: ` <transition> <slot v-if='show'></slot> </transition> ` }) var vm = new Vue({ el:'#app', data:{ show:false }, methods:{ handleClick:function(){ this.show = !this.show; } } }) </script>
可以这样封装，将dom元素传入slot，除了这样，还可以样式一起封装进去
<div> <fade :show='show'> <div>hello world</div> </fade> <fade :show='show'> <h1>hello world</h1> </fade> <button @click='handleClick'>切换</button> </div> <script> Vue.component('fade',{ props:['show'], template: ` <transition @before-enter='handleBeforeEnter' @enter='handleEnter'> <slot v-if='show'></slot> </transition> `, methods:{ handleBeforeEnter:function(el){ el.style.color='red' }, handleEnter:function(el,done){ setTimeout(()=>{ el.style.color='green'; done(); },2000) } } }) var vm = new Vue({ el:'#app', data:{ show:false }, methods:{ handleClick:function(){ this.show = !this.show; } } }) </script>
把样式一起封装进来，是比较推荐的方式。