11.vue过度动画transition

vue过度官方文档地址:
https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E8%BF%87%E6%B8%A1

<template>
  <div class="detail-middle-history-flv">
      <transition name="rightToLeft" >
    <div class="innerContainerHistory"  v-show="isClose">
          <div class="cameraList-box" v-if="videolist.length >4">
                  <div class="cameraList-title" @click="handleShowCamer">摄像头</div>
                   <div class="item-box" v-if="isShowCamer">
                          <p v-for="(item,index) in videolist" :key="index"
                           @click="changeVideoUrl(item.url)"
                          >摄像头{{index+1}}</p>
                   </div>
            </div>
       <div class="player-box">
           <div >   
              <video v-show="videolist.length > 0 " :class="{enlarge:enlarge && enlargeIndex === 0}" poster="../../../static/img/videoPoster.png" id="videoElement0" @dblclick="enlargeFn(0)"  @click="startPlay(0)" autoplay  muted></video>
              <div v-show="videolist.length == 0"  class="videoNull">
                  <span class="videoNullLabel">暂无视频源</span>
              </div>
           </div>
            <div>  
              <video v-show="videolist.length > 1" poster="../../../static/img/videoPoster.png" :class="{enlarge:enlarge && enlargeIndex === 1}"  id="videoElement1" @dblclick="enlargeFn(1)"  @click="startPlay(1)" autoplay muted ></video>
              <div v-show="videolist.length <= 1"  class="videoNull">
                  <span class="videoNullLabel">暂无视频源</span>
              </div>
           </div>
            <div>  
              <video v-show="videolist.length > 2" poster="../../../static/img/videoPoster.png" :class="{enlarge:enlarge && enlargeIndex === 2}"  id="videoElement2" @dblclick="enlargeFn(2)"  @click="startPlay(2)" autoplay  muted></video>
              <div v-show="videolist.length <= 2"  class="videoNull">
                  <span class="videoNullLabel">暂无视频源</span>
              </div>
           </div>
            <div>  
              <video v-show="videolist.length > 3"  :class="{enlarge:enlarge && enlargeIndex === 3}" poster="../../../static/img/videoPoster.png" id="videoElement3" @dblclick="enlargeFn(3)" @click="startPlay(3)" autoplay  muted ></video>
              <div v-show="videolist.length <= 3"  class="videoNull">
                 <span class="videoNullLabel">暂无视频源</span>
              </div>
           </div>
      </div>
  </div>
    </transition>
  <img v-show="!isClose && isCloseBtn"   class="switch-icon flv_open" src="./../../../static/img/icon/flv_open.png" alt=""  @click="handleSwitch" >
   <transition name="rightToLeftBtn" >
  <img v-show="isClose"   class="switch-icon" src="./../../../static/img/icon/flv_close.png" alt=""  @click="handleSwitch" >
   </transition>
</div>
</template>
    watch:{
      isClose(newVal,oldVal){
        //延迟显示flv_open.png
        if(newVal){
          this.isCloseBtn = false
        }else{
          setTimeout(() => {
             this.isCloseBtn = true
          },500)
        }
      }
   },

  .innerContainerHistory{
     overflow-x: hidden;
}
.rightToLeft-enter-active, .rightToLeft-leave-active {
    transition: all .5s;
  }
  .rightToLeft-leave-to{
    transform: translateX(100%)
  }
  .rightToLeft-enter{
    transform: translateX(100%);
  }
   .rightToLeftBtn-enter-active, .rightToLeftBtn-leave-active {
    transition: all .5s;
  }
  .rightToLeftBtn-leave-to{
    transform: translateX(6rem)
  }
  .rightToLeftBtn-enter{
    transform: translateX(6rem);
  }