vue2中怎么更改el-dialog出場動畫

這篇文章主要講解了“vue2中怎么更改el-dialog出場動畫”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue2中怎么更改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出場動畫這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！