vue 淡入淡出组件

vue.js中在不使用jQuery的情况下，如何实现淡入淡出的组件（用于显示http请求成功或者失败的消息提示）？
目前使用的是vue的transition动画。

 <template>
  <div>
    <button v-on:click="Show">点击动画</button>
    <transition-group name="test">
      <h1 v-if="show" :key="1">hello</h1>
      <h2 v-if="show" :key="2">hello world!</h2>
    </transition-group>
  </div>
</template>

<script>


  export default {
    name: 'Test',
    data(){
      return { show:true}
    },
    methods:{
      Show(){
        this.show=!this.show;
      }
    }

  }
</script>

<style scoped>

  .test-enter,.test-leave-to{
    opacity: 0;
  }
  .test-enter-to,.test-leave{
    opacity: 1;
  }
  .test-enter-active,.test-leave-active{
    transition: all 2s;
  }
</style>