一、封装

  1. <template>
  2.   <transition>
  3.     <slot name="fade"></slot>
  4.   </transition>
  5. </template>
  7. <script>
  8. export default {
  9.     name:"Fade"
  10. }
  11. </script>
  13. <style scoped>
  14. .v-leave-active,.v-enter-active{
  15.   transition: opacity 4s;
  16. }
  17. .v-leave-to,.v-enter{
  18.   opacity: 0;
  19. }
  20. </style>

二、使用

  1. <fade>
  2.       <h1 slot="fade" v-show="isShow">this is an about page</h1>
  3.     </fade>