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

Posted on by

前言

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

效果

詳見上面動圖。

基本思路

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

代碼

首先，寫一個常規的el-dialog，裡面el-body分為兩個部分，真正需要展示的內容和執行動畫的圖片：

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

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

然後，對.el-dialog元素的樣式進行更改，主要是定位和居中處理，方便後續從某個位置逐漸旋轉位移到屏幕中間:

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

這個時候，得到瞭一個居中與屏幕的彈窗，當然，別忘取消原來el-dialog的出現和消失動畫:

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

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

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

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

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

    /**
     * @param { HTMLElement } target 被點擊的元素
     * @param { Object } info 展示的內容
     */
    show (target, info) {
      // 記錄target
      this.targetEl = target
      // 獲取target的位置和大小
      const position = target.getClientRects()[0]
      // 獲取.el-dialog元素，將其設為和`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設為透明
        target.style.opacity = 0
      })
    }

已經得到瞭初步的效果瞭，接下來就是讓彈窗旋轉變大居中，這些都比較好實現的，可以通過設定行內樣式或者添加class就行，因為前面已經在.el-dialog上設置好瞭過渡屬性，隻要某個屬性發生變化，就會觸發。
個人是通過添加class的方式，因為關閉的時候，彈窗還得回到原來target的位置上，到時候隻要去除這個class就能實現，比較方便，變化的樣式如下：

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

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

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

    /**
     * @param { HTMLElement } target
     * @param { Object } info
     */
    show (target, info) {
      // 記錄target
      this.targetEl = target
      // 獲取target的位置和大小
      const position = target.getClientRects()[0]
      // 獲取.el-dialog元素，將其設為和`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設為透明
          target.style.opacity = 0
          // 添加展示的class
          dialog.classList.add('dialog-finally')
        }, 50)
      })
    }

效果:

至此，出現的效果處理完成，接下來就是彈窗消失的效果，因為上面是使用class來添加展示的位置和樣式的，所以關閉時，移除那個class就能讓.el-dialog回到target的位置，那麼需要使用el-dialog關閉之前的鉤子before-close，該鉤子接受一個函數，如下：

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

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

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

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

效果：

至此，就完成瞭。

到此這篇關於vue2中如何更改el-dialog出場動畫的文章就介紹到這瞭,更多相關vue2 el-dialog出場動畫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：