vue 如何针对性运用过渡效果

Question

说明：
vue 中我有一个上传的大组件包含三个子组件。三个组件我通过三个布尔变量来设置显示和隐藏
第一个组件默认是显示的(v-if)，剩余两个组件默认是隐藏的(v-if)。
第一个组件包含一个上传按钮，用户点击上传按钮上传文件成功后，第一个组件会淡出消失。
第二个组件会淡入显示，第三个组件依旧是隐藏的。
第二个组件同理也包含一个继续按钮，点击后同样是第二个组件淡出隐藏，第三个组件会淡入显示。

问题：
目前我通过 transition-group 来写，但是只有淡出效果，没有淡入效果

<template>

  <transition-group tag="article" name="upload-fade" class="gaga-upload">

    <upload-instructions key="instructions" v-if="showList.instructionsShow"></upload-instructions>

    <upload-content key="content" :imgs="imgs" v-if="showList.contentShow" v-on:getNext="getDesign"></upload-content>

    <upload-design key="design" v-if="showList.designShow"></upload-design>

  </transition-group>

</template>

Answer 1

绑定name或者参考：动态过渡