vue中的渐隐渐现组件

1.新建一个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>

2.在另外一个组件中引入刚才创建的组件，并使用

<template>
  <div>
    <fade-animation>
     xxxx（需要渐隐渐现的内容或组件）
    </fade-animation>
  </div>
</template>

import FadeAnimation from './FadeAnimation'
export default {
  name: 'xxx',
  components: {
    FadeAnimation
  }
}