您可以使用以下描述的 Quasar morph util，將一個 DOM 元素變形為另一個（帶動畫），或在同一元素的兩種狀態之間變形。
也可能值得看看 Morph 指令，它使用了這個 util，但使用起來更簡單。
基本用法
import { morph } from 'quasar'
// Morph one DOM element to another:
const cancelMorph = morph({
from: '#from-el',
to: '#to-el'
})
// call cancelMorph() to cancel the morphingcontent_paste
此函數需要一個強制性的 Object 參數，其中包含以下鍵
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| from | DOM | - | （必填）DOM 元素或 CSS 選擇器，或返回 DOM 元素的函數 |
| to | DOM | - | 與 “from” 相同；如果缺少 “to”，則假定與 “from” 相同 |
| onToggle() | 函數 | - | 一個同步切換函數，將在保存初始元素的狀態後立即執行。使用一個切換元件狀態的函數，以便目標元素可用。 |
| waitFor | 數字/‘transitioned’/Promise | 0 | 數字、‘transitionend’ 或 Promise - 它將延遲動畫開始，延遲的毫秒數、直到目標元素發出 ‘transitionend’ 事件，或直到 promise 被解析（如果 promise 被拒絕，變形將中止，但 toggle function 已被調用） |
| duration | 數字 | 300 | 動畫的持續時間，以毫秒為單位 |
| easing | 字串 | ‘ease-in-out’ | 動畫的計時函數（CSS easing 格式） |
| delay | 數字 | 0 | 動畫的延遲，以毫秒為單位 |
| fill | 字串 | ‘none’ | 動畫的填充模式 |
| 樣式 | 字串/Object | - | 在動畫期間要應用於變形元素的額外樣式（字串或 CSSStyleDeclaration 物件） |
| classes | 字串 | - | 在動畫期間要應用於變形元素的額外類別（字串） |
| resize | 布林值 | false | 強制調整大小，而不是預設的縮放變換 |
| useCSS | 布林值 | false | 強制使用 CSS 而不是 Animation API |
| hideFromClone | 布林值 | false | 預設情況下，初始元素的克隆用於在元素移除後填充空間 - 如果初始元素未被移除，或者不希望調整初始元素佔用空間的大小，則設定此標誌 |
| keepToClone | 布林值 | false | 預設情況下，最終元素會從其最終位置移除以進行動畫處理 - 設定此標誌以在最終位置保留副本 |
| tween | 布林值 | false | 預設情況下，最終元素會從初始元素的位置和外觀變形為最終元素的位置和外觀 - 設定此標誌以在初始元素和最終元素之間使用不透明度 tween |
| tweenFromOpacity | 數字 | 0.6 | 如果使用 tween，則為初始元素的初始不透明度（將動畫到 0）- 初始元素放置在目標元素的頂部 |
| tweenToOpacity | 數字 | 0.5 | 如果使用 tween，則為目標元素的初始不透明度（將動畫到 1） |
| onEnd(direction, aborted) | 函數 | - | 一個函數，將在變形完成後調用 - 接收兩個參數：“direction” 是一個字串（如果變形在最終狀態下完成，則為 ‘to’，如果在初始狀態下完成，則為 ‘from’），“aborted” 是一個布林值（true 表示動畫被中止） |
變形生命週期
- 獲取初始元素的外觀和位置（如果提供了獲取初始元素的函數，則會調用它）
- 計算初始元素容器的大小和位置
- 如果另一個變形正在使用相同的元素，則該變形將被中止
- 執行 onToggle() 函數（如果存在）
- 重新計算初始元素容器的大小和位置，以檢查它們是否已更改
- 在下一個 tick 中（以允許 Vue 處理狀態更改），將識別最終元素（如果提供了獲取最終元素的函數，則會調用它）
- 如果另一個變形正在使用相同的元素，則該變形將被中止
- 計算最終元素容器的大小和位置
- 如果提供了 waitFor，則等待該毫秒數、等待 ‘transitionend’ 事件，或直到 promise 被解析（如果 promise 被拒絕，則變形中止）
- 重新計算最終元素容器的大小和位置，以檢查它們是否已更改
- 獲取最終元素的外觀和位置
- 開始動畫
關於 cancel() 函數（調用 morph() 的返回值）
- 如果在步驟 1 到 11 期間調用了返回的
cancel函數，則變形將被中止（如果取消在步驟 4 之後，則仍然會調用toggle function），返回值將為 false。 - 如果在動畫開始和結束之間調用了
cancel函數，則動畫將被反轉，返回值將為 true。 - 如果在動畫結束後調用了
cancel函數，則不會發生任何事情，返回值將為 false。