<template>
    <transition :name="$style.fade" v-bind="$attrs">
        <slot :class-name="className" :style-obj="styleObj"></slot>
    </transition>
</template>

<style module>
    .fade:global(-enter),
    .fade:global(-leave-to) {
        opacity: 0;
    }
</style>

<script>
  import '../../assets/common.css'

  export default {
    name: 'fade',
    inheritAttrs: false,
    props: {
      speed: { // 过渡动画时间
        type: [String, Number],
        default: 'normal',
        validator (value) {
          return typeof value === 'number' || ['slow', 'normal', 'fast'].indexOf(value) !== -1
        }
      }
    },
    computed: {
      $style () {
        return this.$options.cssModules
      },
      styleObj () { // 如果duration是数字，则表示具体过渡时间
        return typeof this.speed === 'number' ? {
          transitionDuration: `${this.speed}ms`
        } : {}
      },
      className () { // 根据duration设置类名
        return typeof this.speed === 'number' ? '' : `va-fade-${this.speed}`
      }
    }
  }
</script>