vue fade公用组件及使用

FadeAnimation.vue

<template>
  <transition>
    <slot></slot>
  </transition>
</template>

<script> export default { name: 'FadeAnimation' } </script>

<style lang="stylus" scoped> .v-enter, .v-leave-to opacity: 0 .v-enter-active, .v-leave-active transition: opacity .5s </style>

使用fade公用组件
common-gallary组件会作为插槽传入fade组件

    <fade-animation>
      <common-gallary
        :imgs="bannerImgs"
        v-show="showGallary"
        @close="handleGallaryClose"
      ></common-gallary>
    </fade-animation>