fix(core): transition animation of leaving not take effect(close #52)

Author: akinoccc

.gitignore

@@ -4,3 +4,5 @@
 .idea
 packages/docs/.vitepress/cache
 coverage
+
+.cunzhi-memory

packages/core/src/styled.ts

@@ -12,8 +12,10 @@ import { generateClassName, generateComponentName, injectStyle, insertExpression
 import {
   computed,
   defineComponent,
+  getCurrentInstance,
   h,
   inject,
+  nextTick,
   onMounted,
   onUnmounted,
   reactive,
@@ -100,6 +102,53 @@ type TransformProps<T> = {
     : ConstructorToType<T[K]>
 }
 
+// {{ AURA-X: Add - 实现 transition 友好的样式移除函数. Approval: 寸止. }}
+function removeStyleWithTransition(className: string): void {
+  const instance = getCurrentInstance()
+  if (!instance) {
+    // 如果无法获取组件实例，直接移除样式
+    removeStyle(className)
+    return
+  }
+
+  nextTick(() => {
+    const el = instance.vnode.el as HTMLElement
+    if (!el) {
+      removeStyle(className)
+      return
+    }
+
+    // 检查元素是否有 transition 样式
+    const computedStyle = window.getComputedStyle(el)
+    const transitionDuration = computedStyle.transitionDuration
+    const transitionProperty = computedStyle.transitionProperty
+
+    // 如果没有 transition 或 transition 时间为 0，直接移除样式
+    if (!transitionDuration || transitionDuration === '0s' || transitionProperty === 'none') {
+      removeStyle(className)
+      return
+    }
+
+    // 监听 transitionend 事件
+    const handleTransitionEnd = (event: TransitionEvent) => {
+      // 确保事件来自当前元素
+      if (event.target === el) {
+        el.removeEventListener('transitionend', handleTransitionEnd)
+        removeStyle(className)
+      }
+    }
+
+    el.addEventListener('transitionend', handleTransitionEnd)
+
+    // 设置超时保护，防止 transitionend 事件未触发
+    const maxDuration = Number.parseFloat(transitionDuration) * 1000 + 100 // 添加 100ms 缓冲
+    setTimeout(() => {
+      el.removeEventListener('transitionend', handleTransitionEnd)
+      removeStyle(className)
+    }, maxDuration)
+  })
+}
+
 function baseStyled<T extends object>(target: string | InstanceType<any>, propsDefinition?: PropsDefinition<T>, defaultAttrs?: unknown): StyledComponent<T> {
   if (!isValidElementType(target)) {
     throw new Error('The element is invalid.')
@@ -249,7 +298,8 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
         })
 
         onUnmounted(() => {
-          removeStyle(defaultClassName)
+          // {{ AURA-X: Modify - 实现 transition 友好的样式移除机制. Approval: 寸止. }}
+          removeStyleWithTransition(defaultClassName)
         })
 
         // Return the render function

packages/playground/src/App.vue

@@ -7,6 +7,7 @@ import StressTests from './components/StressTests.vue'
 import ThemeTests from './components/ThemeTests.vue'
 import PropsTest from './components/PropsTest.vue'
 import DebugPanel from './components/DebugPanel.vue'
+import TransitionTest from './TransitionTest.vue'
 
 // 主题配置
 const theme = reactive({
@@ -176,6 +177,8 @@ const exportReport = () => {
 
 <template>
   <ThemeProvider :theme="theme">
+    <TransitionTest />
+
     <AppContainer>
       <Header>
         <h1>Vue Styled Components Playground</h1>

packages/playground/src/TransitionTest.vue

@@ -0,0 +1,33 @@
+<template>
+  <button @click="toggle">Toggle</button>
+  <transition name="trans">
+    <StyledBox v-if="visible" />
+  </transition>
+</template>
+
+<script setup>
+import { styled } from "@vue-styled-components/core";
+import { ref } from "vue";
+
+const StyledBox = styled.div`
+  width: 100px;
+  height: 100px;
+  background: red;
+`;
+
+const visible = ref(true);
+function toggle() {
+  visible.value = !visible.value;
+}
+</script>
+
+<style>
+.trans-enter-active,
+.trans-leave-active {
+  transition: transform 0.5s ease;
+}
+.trans-enter-from,
+.trans-leave-to {
+  transform: translateY(100%);
+}
+</style>