feat(mbm-bugs): 新增读取多种动画延时样式，并取其中最大时长

Author: betterdancing

packages/canvas/container/src/container.ts

@@ -466,6 +466,42 @@ const setSelectRect = (
   )
 }
 
+const getElementDurationTime = (elementId?: string) => {
+  const element = elementId ? querySelectById(elementId) : getDocument().body
+
+  const durationTime = window.getComputedStyle(element).getPropertyValue('transition-duration')
+  const delayTime = window.getComputedStyle(element).getPropertyValue('transition-delay')
+  const transition = window.getComputedStyle(element).getPropertyValue('transition')
+  let delayArray: string[] = []
+  if (transition) {
+    const delayRegex = /([0-9]+(\.[0-9]+)?)(s|ms|S|MS)/
+    const transitions = transition.split(',')
+    transitions.forEach((item) => {
+      const parts = item.trim().split(' ')
+      delayArray = delayArray.concat(parts)
+    })
+    delayArray = delayArray.filter((delay) => delayRegex.test(delay))
+  }
+
+  if (durationTime) {
+    delayArray.push(durationTime)
+  }
+
+  if (delayTime) {
+    delayArray.push(delayTime)
+  }
+  const delayTimes: any[] = delayArray.map((item) => {
+    if (item) {
+      if (item.endsWith('ms')) {
+        return parseFloat(item)
+      } else {
+        return parseFloat(item) * 1000
+      }
+    }
+  })
+  return delayTimes.length ? Math.max(...delayTimes) : 0
+}
+
 export const updateRect = (id?: string) => {
   id = (typeof id === 'string' && id) || getCurrent().schema?.id
   clearHover()
@@ -482,16 +518,7 @@ export const updateRect = (id?: string) => {
 
   if (id || isBodySelected) {
     // 获取元素动画持续时间
-    const element = querySelectById(id) || getDocument().body
-    const duration = window.getComputedStyle(element).getPropertyValue('transition-duration')
-    let waitTime = 0
-    if (duration) {
-      if (duration.endsWith('ms')) {
-        waitTime = parseFloat(duration)
-      } else {
-        waitTime = parseFloat(duration) * 1000
-      }
-    }
+    const waitTime = getElementDurationTime(id)
     setTimeout(() => setSelectRect(id), waitTime)
   } else {
     clearSelect()