问题：如果在slot标签上使用v-show，程序功能是无法实现的，必须改成v-if。
原因：slot实际是一个抽象元素，有点类似template,本质并不是一个元素。
而v-show是通过控制元素的display来进行显示和隐藏的，slot本身不是元素，所以压根就不会有display这个css属性
所以,slot显示隐藏,要使用v-if。
css动画在<style>中定义，js动画在@before-enter="handleBeforEnter"中定义
步骤：
1.定义一个名为fade 的组件，然后在加上transition模板，并在此模板中加入slot插槽，slot中v-if绑定“show”属性，它的显示与否取决于父组件fade传进来的show的变量是否是show
2.当使用的时候只需要在dom元素上包裹一层fade组件，并在fade组件上绑定show属性，令其等于子组件中v-if绑定的show内容。
3.推荐动画使用js动画而不是css动画，从而使所有动画代码封装在一个组件里。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue的动画封装</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <fade :show="show"> <div>hello world </div> </fade> <fade :show="show"> <h1>hello world </h1> </fade> <button @click="handleBtnClick">toggle</button> </div> <script> Vue.component('fade',{ props:['show'], template:` <transition @befor-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() },4000) } } }) var vm=new Vue({ el:'#root', data:{ show:false }, methods:{ handleBtnClick:function(){ this.show=!this.show } } }) </script> </body> </html>