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或者参考：动态过渡

Answer 2

检查你upload-fade这里面的样式是否写了进入选择器的效果，大概如下

.upload-fade-enter-active, .upload-fade-leave-active {
  -webkit-transition: all .3s cubic-bezier(.26, .67, .75, .97);
  transition: all .3s cubic-bezier(.26, .67, .75, .97)
}

.upload-fade-enter {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}

.upload-fade-leave-active {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}

另外检查你

<upload-xxxx>

这几个组件的最外层css样式 是不是相对于 <transition-group>都是绝对定位，你现在可能是这几个组件同时显示的话应该是上下一次排开的，所以你看不到进入效果

详细参考
https://cn.vuejs.org/v2/guide... [过渡模式]