vue2中如何更改el-dialog出場動畫(el-dialog彈窗組件)

更新時間：2022年06月16日 11:51:23 作者：水開泡茶

el-dialog是一個十分好用的彈窗組件，但是出場動畫比較單調(diào)，于是決定自定義一個出場動畫，本文通過實(shí)例代碼圖文相結(jié)合給大家敘述下實(shí)現(xiàn)思路，感興趣的朋友一起看看吧

前言

el-dialog是一個十分好用的彈窗組件，但是出場動畫比較單調(diào)，于是決定自定義一個出場動畫，本文記敘一下思路。

效果

詳見上面動圖。

基本思路

將.el-body分為兩個部分，一個彈窗真正要展示的內(nèi)容，一個出現(xiàn)、關(guān)閉時動畫的圖片展示(不一定是圖片，本項(xiàng)目剛好是圖片而已)，在出場動畫的過程中，圖片逐漸消失，真正的內(nèi)容發(fā)逐漸展現(xiàn)，看起來就像是原本那張圖片通過旋轉(zhuǎn)之后，變成了彈窗。

代碼

首先，寫一個常規(guī)的el-dialog，里面el-body分為兩個部分，真正需要展示的內(nèi)容和執(zhí)行動畫的圖片：

<el-dialog
    :visible.sync="visible"
    top='0'  // 設(shè)置為零，方便后續(xù)的居中處理
    title="詳情彈窗"
  >
    <div class="show-info-facce">
      <!-- 真正展示的內(nèi)容 -->
    </div>

    <!-- 執(zhí)行動畫的圖片 -->
    <div class="animation-face">
      <el-image v-if="showInfo.img" :src="showInfo.img" :fit="'contain'" class="show-img" />
    </div>
  </el-dialog>

然后，對.el-dialog元素的樣式進(jìn)行更改，主要是定位和居中處理，方便后續(xù)從某個位置逐漸旋轉(zhuǎn)位移到屏幕中間:

  .el-dialog {
    position: absolute;
    // 根據(jù)項(xiàng)目中彈窗的大小設(shè)定的居中，用其他方式實(shí)現(xiàn)居中也行
    left: calc(50% - 400px);
    top: calc(50% - 242px);
    overflow: hidden;
    // 設(shè)置過渡，出現(xiàn)與消失的動畫是靠過渡實(shí)現(xiàn)的
    transition: all 1s;
  }

這個時候，得到了一個居中與屏幕的彈窗，當(dāng)然，別忘取消原來el-dialog的出現(xiàn)和消失動畫:

.el-dialog__wrapper {
  transition-duration: 0.1s;
}
.el-dialog__wrapper.dialog-fade-enter-active,
.el-dialog__wrapper.dialog-fade-leave-active {
  animation: none !important;
}

這個時候就會得到一個沒有動畫的彈窗:

接下來，就是主要的動畫部分了，在這個項(xiàng)目中，可以看到彈窗是在點(diǎn)擊之后出現(xiàn)的，而這個點(diǎn)擊實(shí)際上會操作一個控制彈窗是否出現(xiàn)的變量visible，來控制彈窗是否出現(xiàn)，本人把這個操作封裝成一個函數(shù)show()，這個函數(shù)還接受展示內(nèi)容的信息info：

/**
 * @param { Object } info
 */
show(info) {
    this.showInfo = info
    this.visible = true
}

到這個步驟為止，是大部分el-dialog的常規(guī)使用流程；從封面的動圖可以看到，el-dialog是從被點(diǎn)擊的圖片位置出現(xiàn)的，而且彈窗出現(xiàn)后，原本的圖片消失了。
這使得需要在show()獲取被點(diǎn)擊元素target來實(shí)現(xiàn)，這個不難獲取，然后就是得到target的位置和大小，將el-dialog設(shè)為和target一樣，接著使用上面用于執(zhí)行動畫的.animation-face元素來模擬原來的target，然后將target的不透明度opacity設(shè)為零，整體代碼如下：

    /**
     * @param { HTMLElement } target 被點(diǎn)擊的元素
     * @param { Object } info 展示的內(nèi)容
     */
    show (target, info) {
      // 記錄target
      this.targetEl = target
      // 獲取target的位置和大小
      const position = target.getClientRects()[0]
      // 獲取.el-dialog元素，將其設(shè)為和`target`一樣的大小和位置
      const dialog = this.$el.querySelector('.el-dialog')
      dialog.style.width = position.width + 'px'
      dialog.style.height = position.height + 'px'
      dialog.style.top = position.top + 'px'
      dialog.style.left = position.left + 'px'
      // 記錄展示信息
      this.showInfo = info
      this.$nextTick(() => {
        this.visible = true
        // 原本的target設(shè)為透明
        target.style.opacity = 0
      })
    }

已經(jīng)得到了初步的效果了，接下來就是讓彈窗旋轉(zhuǎn)變大居中，這些都比較好實(shí)現(xiàn)的，可以通過設(shè)定行內(nèi)樣式或者添加class就行，因?yàn)榍懊嬉呀?jīng)在.el-dialog上設(shè)置好了過渡屬性，只要某個屬性發(fā)生變化，就會觸發(fā)。
個人是通過添加class的方式，因?yàn)殛P(guān)閉的時候，彈窗還得回到原來target的位置上，到時候只要去除這個class就能實(shí)現(xiàn)，比較方便，變化的樣式如下：

 .dialog-finally {
    // 設(shè)定好最終展示的寬高
    width: 800px !important;
    height: 484px !important;
    // 最終展示的位置
    left: calc(50% - 400px) !important;
    top: calc(50% - 242px) !important;
    // 加點(diǎn)旋轉(zhuǎn)
    transform: rotateY(360deg);

    // 執(zhí)行動畫的圖片透明度設(shè)置為零，隱藏起來，顯示出真正要展示的內(nèi)容
    div.animation-face {
      opacity: 0;
    }
  }

然后在show函數(shù)中，給.el-dialog元素添加這個class，需要注意的是，直接添加會被vue2合并成一次更改，直接展示最終的樣式，不會觸發(fā)過渡效果，所以延時一會再把展示的class添加上去，完整的show()代碼如下:

    /**
     * @param { HTMLElement } target
     * @param { Object } info
     */
    show (target, info) {
      // 記錄target
      this.targetEl = target
      // 獲取target的位置和大小
      const position = target.getClientRects()[0]
      // 獲取.el-dialog元素，將其設(shè)為和`target`一樣的大小和位置
      const dialog = this.$el.querySelector('.el-dialog')
      dialog.style.width = position.width + 'px'
      dialog.style.height = position.height + 'px'
      dialog.style.top = position.top + 'px'
      dialog.style.left = position.left + 'px'
      // 記錄展示信息
      this.showInfo = info
      // 渲染初始位置
      this.$nextTick(() => {
        this.visible = true
        // 延時添加最終樣式
        setTimeout(() => {
          // 原本的target設(shè)為透明
          target.style.opacity = 0
          // 添加展示的class
          dialog.classList.add('dialog-finally')
        }, 50)
      })
    }

效果:

至此，出現(xiàn)的效果處理完成，接下來就是彈窗消失的效果，因?yàn)樯厦媸鞘褂?code>class來添加展示的位置和樣式的，所以關(guān)閉時，移除那個class就能讓.el-dialog回到target的位置，那么需要使用el-dialog關(guān)閉之前的鉤子before-close，該鉤子接受一個函數(shù)，如下：

<el-dialog
    :visible.sync="visible"
    top='0'  // 設(shè)置為零，方便后續(xù)的居中處理
    title="詳情彈窗"
    :before-close="handleAnimateClose" // 使用關(guān)閉之前的鉤子
  >
    <div class="show-info-facce">
      <!-- 真正展示的內(nèi)容 -->
    </div>

    <!-- 執(zhí)行動畫的圖片 -->
    <div class="animation-face">
      <el-image v-if="showInfo.img" :src="showInfo.img" :fit="'contain'" class="show-img" />
    </div>
  </el-dialog>

handleAnimateClose函數(shù)就是在關(guān)閉之前先移除展示的class，等彈窗回到target原本的位置之后，target的不透明度設(shè)置為1，關(guān)閉彈窗，代碼如下：

    /** 執(zhí)行關(guān)閉動畫 */
    handleAnimateClose (done) {
      // 獲取`.el-dialog`元素
      const dialog = this.$el.querySelector('.el-dialog')
      // 移除展示的class
      dialog.classList.remove('dialog-finally')
      // 使用延時，等彈窗回到`target`原本的位置，再關(guān)閉彈窗
      setTimeout(() => {
        // 關(guān)閉彈窗
        done()
        // target不透明度設(shè)為1
        this.targetEl.style.opacity = 1
      }, 1000)
    }

效果：