9.2动画封装成插槽

//1.封装
<template>
     <transition>
        <slot name="fade"></slot>
    </transition>
</template>
<script>
    export default {
        name:"Fade"
    }
</script>
<style scoped>
.v-leave-active,.v-enter-active{
     transition: opacity 2s;
   }
.v-enter,.v-leave-to{
     opacity: 0;
   }
</style>

//2.使用
  <fade>
       <h1 slot="fade" v-show="isShow">This is an about page</h1>
    </fade>
//完整代码
<template>
  <div class="about">
      <fade>
          <h1 slot="fade" v-show="isShow">This is an about page</h1>
       </fade>
  </div>
</template>
<script>
import Fade from '../components/Fade'
export default {
  name:"About",
  data(){
    return{
      isShow:true
    }
  },
  components:{
      Fade
  },
}
</script>
<style scoped>
</style>