vue动画，transition标签的 mode="out-in" 属性不起作用？

Question

用vue自带的动画实现了淡入淡出的效果，但是transition属性mode="out-in"不起作用，导致动画消失和显示出现了重叠，我希望动画消失和显示之间有一定的事件间隔，问题出在哪儿呢？

              <transition name="fade" mode="out-in">
                  <div class="sider-item item1" v-if="curIdx == 0">
                      animation 1111
                  </div>
              </transition>
              <transition name="fade" mode="out-in">
                <div class="sider-item item2" v-if="curIdx == 1">
                    animation 2222
                </div>
              </transition>

css如下：

    //消失时间持续3s
    .fade-enter-active{
      transition: all 3s;
    }

    //显示时间持续1.5s
    .fade-leave-active{
      transition: all 1.5s;        
    }

    .fade-enter, .fade-leave-active{
        opacity: 0;
    }

改成如下方式也无效：

//transition 添加属性 duration
<transition name="fade" mode="out-in" :duration="{ enter: 1000, leave: 3000 }">
</transition>

//css对应修改为
    .fade-enter-active{
      transition-property: all;
    }

    .fade-leave-active{
      transition-property: all; 
    }

    .fade-enter, .fade-leave-active{
        opacity: 0;
    }

Answer 1

在显示动画中，加上动画延时，这样就不会出现同步和重叠的情况，
但这样会有一种情况就是初始化的时候会慢，如果想要解决，还可以初始化后给他们加上一个class，
然后.fade-enter-active.xxxx 两个class都有就加上动画延时，transtion-delay，就能解决

Answer 2

    .fade-enter-active{
      transition: all 1.5s;
      transition-delay: 2s;
    }

    .fade-leave-active{
      transition: all 2.5s;
    }

    .fade-enter, .fade-leave-active{
        opacity: 0;
    }

这样可以了，但是为什么 transition标签属性mode="out-in" 为什么不起作用呢？

Answer 3

如下写法
<transition name="fade" mode="out-in">

              <div class="sider-item item1" v-if="curIdx == 0" key="key1">
                  animation 1111
              </div>
              <div class="sider-item item2" v-if="curIdx == 1" key="key2">
                animation 2222
            </div>

</transition>
需要key标识,二者不同。
默认判断使用的是 标签名。
有key 优先判断key。