用vue自帶的動畫實現(xiàn)了淡入淡出的效果，但是transition屬性mode="out-in"不起作用，導(dǎo)致動畫消失和顯示出現(xiàn)了重疊，我希望動畫消失和顯示之間有一定的事件間隔，問題出在哪兒呢？

              <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如下：

    //消失時間持續(xù)3s
    .fade-enter-active{
      transition: all 3s;
    }

    //顯示時間持續(xù)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對應(yīng)修改為
    .fade-enter-active{
      transition-property: all;
    }

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

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