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

前言

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!

推薦閱讀: