弹框模拟动画

  <lz-dialog
      :close-on-click-modal="false"
      :close="false"
      :dialogVisible.sync="schedule"
      :showHeader="false"
      :showFooter="false"
      :modal="isModal"
      style="transform-origin: top center;overflow: hidden"
      :style="{ transform:hideTransform,left:left,top:top}"
    >
      <div class="inconsistentFormat">
        <div class="title">导入数据</div>
        <el-progress
          :percentage="percentage"
          :color="customColor"
          :stroke-width="16"
          :show-text="false"
        ></el-progress>
        <div class="footer">
          <el-button class="footer-ok" type="primary" @click="hideSchedule">缩小窗口</el-button>
        </div>
      </div>

    </lz-dialog>

   //模拟动画  
    /*
    * 
    * */
    getElementToPageTop(el) {
      if(el.parentElement) {
        // return el.offsetTop + 92
        return this.getElementToPageTop(el.parentElement) + el.offsetTop
      }
      return el.offsetTop
    },
    getElementToPageLeft(el) {
      if(el.parentElement) {
        return this.getElementToPageLeft(el.parentElement) + el.offsetLeft
      }
      return el.offsetTop
    },

  hideSchedule(){
     let Imgtop = 413 / (window.innerHeight / 100) / 2
     let Imgleft = this.getElementToPageLeft(document.querySelector('.showScheduleBox')) - 100
      let scale=1
      this.isModal = false
      this.left = '0px'
      this.top = '0vh'
      let mgl = 0
      let tVh = 0
      document.querySelector(".v-modal").style.display = "none";
      this.$forceUpdate()
      let that = this
      let timer = () => {
        if (scale>0) {
          scale -= 0.01;
          mgl += (Imgleft/100);
          tVh += (Imgtop/100);
          that.hideTransform = `scale(${scale})`
          that.left = `${mgl}px`
          that.top = `${tVh}vh`
        } else {
          clearInterval(timer);
        }
      };
      setInterval(timer, 10);

    },

showScheduleBox(){
  let scale=0
  let mgl = this.getElementToPageLeft(document.querySelector('.showScheduleBox')) - 100
  let Imgleft = this.getElementToPageLeft(document.querySelector('.showScheduleBox')) - 100
  let tVh = 413 / (window.innerHeight / 100) / 2
  let Imgtop = 413 / (window.innerHeight / 100) / 2
  document.querySelector(".v-modal").style.display = "block";
  let that = this
  let timer = () => {
    if (scale < 1) {
      scale += 0.01;
      mgl -= (Imgleft/100);
      tVh -= (Imgtop/100);
      that.hideTransform = `scale(${scale})`
      that.left = `${mgl}px`
      that.top = `${tVh}vh`
    } else {
      this.isModal = true
      clearInterval(timer);
    }
  };
  setInterval(timer, 10);
}