一、配置

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

二、使用

  1. <fade>
  2.       <template v-slot:fade>
  3.           <p v-if="show">hello world</p>
  4.       </template>
  5. </fade>