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>