transition动画

1.

v-enter （淡入的第一帧）/ v-leave: 进入/离开过度的开始状态; 
v-enter-to / v-leave-to: 进度/离开过度的结束状态;
v-enter-active(过程） / v-leave-active: 进入/离开过度时的生效状态;

  <button @click="cut" >click</button>
//out-in：当前元素先进行过渡，完成之后新元素过渡进入。

  <transition name="cc" mode="out-in">      <!---使用过度自定义name--->
         <div class="ss" key="1"  v-if="concat.length != 0">内容</div>
         <div class="sa" key="2"  v-else>无记录</div>

 </transition>


 data(){
      return {
         
          isShow:true,
          concat:[]
      }
  },
  methods:{
    cut(){
      this.isShow = !this.isShow
     if (this.isShow) {
      //  接口
       this.concat = [1,1]
      } else {
      //  接口
       this.concat = []
      }
    }
  }

css

.cc-enter-active,
.cc-leave-active {
  /* 进入 / 离开 过度生效状态 */
  transition: all 0.7s;
}
.cc-enter,
.cc-leave-to {
  /* 进入状态 & 结束状态 opacity为0 */
  opacity: 0;
  transform: translateX(10px);
}