From 16f7ed699b21459b8976760e5d0e93f063538159 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 16 Apr 2024 01:49:20 +0800
Subject: [PATCH] =?UTF-8?q?perf(theme):=20=E4=BC=98=E5=8C=96=E6=96=87?=
 =?UTF-8?q?=E7=AB=A0=E5=88=97=E8=A1=A8=E7=BF=BB=E9=A1=B5=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/TransitionDrop.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/theme/src/client/components/TransitionDrop.vue b/theme/src/client/components/TransitionDrop.vue
index 2248c002..3dab68c2 100644
--- a/theme/src/client/components/TransitionDrop.vue
+++ b/theme/src/client/components/TransitionDrop.vue
@@ -9,25 +9,33 @@ const props = withDefaults(defineProps<Props>(), {
   duration: 0.25,
 })
 
+let _transition = ''
+
 function setStyle(item: Element) {
   const el = item as HTMLElement
-  el.style.transition = `transform ${props.duration}s ease-in-out ${props.delay}s, opacity ${props.duration}s ease-in-out ${props.delay}s`
+  if (_transition === '') {
+    const value = window.getComputedStyle(el).transition
+    _transition = value && !value.includes('all') ? `${value}, ` : ''
+  }
   el.style.transform = 'translateY(-20px)'
   el.style.opacity = '0'
+  el.style.transition = `transform ${props.duration}s ease-in-out ${props.delay}s, opacity ${props.duration}s ease-in-out ${props.delay}s`
 }
 
 function unsetStyle(item: Element) {
   const el = item as HTMLElement
   el.style.transform = 'translateY(0)'
   el.style.opacity = '1'
+  el.style.transition = _transition
 }
 </script>
 
 <template>
   <Transition
     name="drop"
+    mode="out-in"
     :appear="appear"
-    @appear="setStyle"
+    @before-appear="setStyle"
     @after-appear="unsetStyle"
     @enter="setStyle"
     @after-enter="unsetStyle"