@veltra/styles 1.14.1 → 1.15.1

package/dist/theme/presets/light.js

@@ -80,7 +80,7 @@ const lightTheme = new UITheme({
 		normal: "0.25s",
 		slow: "0.35s",
 		ease: "cubic-bezier(0.4, 0, 0.2, 1)",
-		easeOut: "cubic-bezier(0, 0, 0.2, 1)"
+		easeOut: "cubic-bezier(0.23, 1, 0.32, 1)"
 	},
 	gap: defineBySize({
 		small: 6,

package/dist/theme/presets/light.js.map

@@ -1 +1 @@
-{"version":3,"file":"light.js","names":[],"sources":["../../../src/theme/presets/light.ts"],"sourcesContent":["import { defineBySize } from '../helper'\nimport { UITheme } from '../ui-theme'\n\nexport const lightTheme: UITheme = new UITheme(\n  {\n    color: {\n      primary: '#2563eb',\n      success: '#16a34a',\n      warning: '#d97706',\n      danger: '#dc2626',\n      info: '#0891b2',\n      disabled: '#f4f4f5',\n      default: '#f4f4f5'\n    },\n\n    bg: {\n      color: {\n        bottom: '#f4f4f5',\n        middle: '#fafafa',\n        top: '#ffffff',\n        hover: '#f4f4f5',\n        black: '#000000'\n      },\n\n      filter: { blur: 'none', saturate: 'none' }\n    },\n\n    // color 用于结构分隔线（保持安静）；mutedColor 用于表单控件/卡片描边（需要清晰的 affordance）\n    border: { color: '#e4e4e7', mutedColor: '#d4d4d8', width: 1, style: 'solid' },\n\n    'text-color': {\n      title: '#18181b',\n      main: '#3f3f46',\n      placeholder: '#a1a1aa',\n      second: '#71717a',\n      assist: '#d4d4d8',\n      disabled: '#a1a1aa',\n      white: '#fff'\n    },\n\n    // 对齐 Tailwind rounded-md / rounded-lg / rounded-xl\n    radius: defineBySize({ small: 6, default: 8, large: 12 }),\n\n    'form-component-height': defineBySize({ small: 24, default: 32, large: 40 }),\n\n    'font-family':\n      'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif',\n\n    'font-size-title': defineBySize({ small: 14, default: 16, large: 18 }),\n\n    'font-size-main': defineBySize({ small: 12, default: 14, large: 16 }),\n\n    'font-size-assist': defineBySize({ small: 12, default: 12, large: 14 }),\n\n    shadow: {\n      color: '#00000014',\n      x: 0,\n      y: 1,\n      blur: 3,\n      spread: 0,\n      emboss: 'none',\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      lg: '0 8px 24px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 0 rgba(0, 0, 0, 0.06)'\n    },\n\n    transition: {\n      fast: '0.15s',\n      normal: '0.25s',\n      slow: '0.35s',\n      ease: 'cubic-bezier(0.4, 0, 0.2, 1)',\n      easeOut: 'cubic-bezier(0, 0, 0.2, 1)'\n    },\n\n    gap: defineBySize({ small: 6, default: 8, large: 12 }),\n\n    breakpoint: { xs: 600, sm: 960, md: 1280, lg: 1920 },\n\n    button: { 'default-bg': 'var(--u-bg-color-top)' }\n  },\n  { reactive: false }\n)\n"],"mappings":";;;AAGA,MAAa,aAAsB,IAAI,QACrC;CACE,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CAEA,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;EACT;EAEA,QAAQ;GAAE,MAAM;GAAQ,UAAU;EAAO;CAC3C;CAGA,QAAQ;EAAE,OAAO;EAAW,YAAY;EAAW,OAAO;EAAG,OAAO;CAAQ;CAE5E,cAAc;EACZ,OAAO;EACP,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CAGA,QAAQ,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;CAAG,CAAC;CAExD,yBAAyB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAE3E,eACE;CAEF,mBAAmB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAErE,kBAAkB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAEpE,oBAAoB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAEtE,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CAEA,YAAY;EACV,MAAM;EACN,QAAQ;EACR,MAAM;EACN,MAAM;EACN,SAAS;CACX;CAEA,KAAK,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;CAAG,CAAC;CAErD,YAAY;EAAE,IAAI;EAAK,IAAI;EAAK,IAAI;EAAM,IAAI;CAAK;CAEnD,QAAQ,EAAE,cAAc,wBAAwB;AAClD,GACA,EAAE,UAAU,MAAM,CACpB"}
+{"version":3,"file":"light.js","names":[],"sources":["../../../src/theme/presets/light.ts"],"sourcesContent":["import { defineBySize } from '../helper'\nimport { UITheme } from '../ui-theme'\n\nexport const lightTheme: UITheme = new UITheme(\n  {\n    color: {\n      primary: '#2563eb',\n      success: '#16a34a',\n      warning: '#d97706',\n      danger: '#dc2626',\n      info: '#0891b2',\n      disabled: '#f4f4f5',\n      default: '#f4f4f5'\n    },\n\n    bg: {\n      color: {\n        bottom: '#f4f4f5',\n        middle: '#fafafa',\n        top: '#ffffff',\n        hover: '#f4f4f5',\n        black: '#000000'\n      },\n\n      filter: { blur: 'none', saturate: 'none' }\n    },\n\n    // color 用于结构分隔线（保持安静）；mutedColor 用于表单控件/卡片描边（需要清晰的 affordance）\n    border: { color: '#e4e4e7', mutedColor: '#d4d4d8', width: 1, style: 'solid' },\n\n    'text-color': {\n      title: '#18181b',\n      main: '#3f3f46',\n      placeholder: '#a1a1aa',\n      second: '#71717a',\n      assist: '#d4d4d8',\n      disabled: '#a1a1aa',\n      white: '#fff'\n    },\n\n    // 对齐 Tailwind rounded-md / rounded-lg / rounded-xl\n    radius: defineBySize({ small: 6, default: 8, large: 12 }),\n\n    'form-component-height': defineBySize({ small: 24, default: 32, large: 40 }),\n\n    'font-family':\n      'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif',\n\n    'font-size-title': defineBySize({ small: 14, default: 16, large: 18 }),\n\n    'font-size-main': defineBySize({ small: 12, default: 14, large: 16 }),\n\n    'font-size-assist': defineBySize({ small: 12, default: 12, large: 14 }),\n\n    shadow: {\n      color: '#00000014',\n      x: 0,\n      y: 1,\n      blur: 3,\n      spread: 0,\n      emboss: 'none',\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      lg: '0 8px 24px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 0 rgba(0, 0, 0, 0.06)'\n    },\n\n    transition: {\n      fast: '0.15s',\n      normal: '0.25s',\n      slow: '0.35s',\n      ease: 'cubic-bezier(0.4, 0, 0.2, 1)',\n      easeOut: 'cubic-bezier(0.23, 1, 0.32, 1)'\n    },\n\n    gap: defineBySize({ small: 6, default: 8, large: 12 }),\n\n    breakpoint: { xs: 600, sm: 960, md: 1280, lg: 1920 },\n\n    button: { 'default-bg': 'var(--u-bg-color-top)' }\n  },\n  { reactive: false }\n)\n"],"mappings":";;;AAGA,MAAa,aAAsB,IAAI,QACrC;CACE,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CAEA,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;EACT;EAEA,QAAQ;GAAE,MAAM;GAAQ,UAAU;EAAO;CAC3C;CAGA,QAAQ;EAAE,OAAO;EAAW,YAAY;EAAW,OAAO;EAAG,OAAO;CAAQ;CAE5E,cAAc;EACZ,OAAO;EACP,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CAGA,QAAQ,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;CAAG,CAAC;CAExD,yBAAyB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAE3E,eACE;CAEF,mBAAmB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAErE,kBAAkB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAEpE,oBAAoB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG,CAAC;CAEtE,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CAEA,YAAY;EACV,MAAM;EACN,QAAQ;EACR,MAAM;EACN,MAAM;EACN,SAAS;CACX;CAEA,KAAK,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;CAAG,CAAC;CAErD,YAAY;EAAE,IAAI;EAAK,IAAI;EAAK,IAAI;EAAM,IAAI;CAAK;CAEnD,QAAQ,EAAE,cAAc,wBAAwB;AAClD,GACA,EAAE,UAAU,MAAM,CACpB"}

package/dist/transitions/fade-scale.css

@@ -1,19 +1,31 @@
 .fade-scale-enter-active {
   will-change: scale, opacity;
-  transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
+  transition: scale 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .fade-scale-leave-active {
   will-change: scale, opacity;
-  transition: scale 0.2s ease-in, opacity 0.15s ease-in;
+  transition: scale 160ms cubic-bezier(0.23, 1, 0.32, 1), opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .fade-scale-enter-from {
-  scale: 0.8;
+  scale: 0.96;
   opacity: 0;
 }
 
 .fade-scale-leave-to {
-  scale: 0.9;
+  scale: 0.98;
   opacity: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .fade-scale-enter-active,
+  .fade-scale-leave-active {
+    transition-property: opacity;
+  }
+  .fade-scale-enter-from,
+  .fade-scale-leave-to {
+    scale: 1;
+    opacity: 0;
+  }
+}

package/dist/transitions/fade-scale.scss

@@ -4,23 +4,37 @@
 .fade-scale-enter-active {
   will-change: scale, opacity;
   transition:
-    scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
-    opacity 0.35s ease;
+    scale 200ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .fade-scale-leave-active {
   will-change: scale, opacity;
   transition:
-    scale 0.2s ease-in,
-    opacity 0.15s ease-in;
+    scale 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .fade-scale-enter-from {
-  scale: 0.8;
+  scale: 0.96;
   opacity: 0;
 }
 
 .fade-scale-leave-to {
-  scale: 0.9;
+  scale: 0.98;
   opacity: 0;
 }
+
+// 减弱动态效果：不缩放，只保留透明度
+@media (prefers-reduced-motion: reduce) {
+  .fade-scale-enter-active,
+  .fade-scale-leave-active {
+    transition-property: opacity;
+  }
+
+  .fade-scale-enter-from,
+  .fade-scale-leave-to {
+    scale: 1;
+    opacity: 0;
+  }
+}

package/dist/transitions/slide.css

@@ -3,10 +3,13 @@
 .slide-up-leave-to {
   opacity: 0;
 }
-.slide-down-enter-active, .slide-down-leave-active,
-.slide-up-enter-active,
+.slide-down-enter-active,
+.slide-up-enter-active {
+  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-down-leave-active,
 .slide-up-leave-active {
-  transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1), opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
+  transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .slide-down-enter-from, .slide-down-leave-to {
@@ -16,3 +19,19 @@
 .slide-up-enter-from, .slide-up-leave-to {
   transform: translateY(10px);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .slide-down-enter-active,
+  .slide-down-leave-active,
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition-property: opacity;
+  }
+  .slide-down-enter-from,
+  .slide-down-leave-to,
+  .slide-up-enter-from,
+  .slide-up-leave-to {
+    transform: none;
+    opacity: 0;
+  }
+}

package/dist/transitions/slide.scss

@@ -5,11 +5,17 @@
     opacity: 0;
   }
 
-  &-enter-active,
+  &-enter-active {
+    transition:
+      transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  // 出场比入场快
   &-leave-active {
     transition:
-      transform 0.2s cubic-bezier(0, 0, 0.2, 1),
-      opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
+      transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1);
   }
 }
 
@@ -26,3 +32,21 @@
     transform: translateY(10px);
   }
 }
+
+// 减弱动态效果：不位移，只保留透明度
+@media (prefers-reduced-motion: reduce) {
+  .slide-down-enter-active,
+  .slide-down-leave-active,
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition-property: opacity;
+  }
+
+  .slide-down-enter-from,
+  .slide-down-leave-to,
+  .slide-up-enter-from,
+  .slide-up-leave-to {
+    transform: none;
+    opacity: 0;
+  }
+}

package/dist/transitions/spring.css

@@ -1,6 +1,7 @@
 @keyframes spring-in {
   0% {
-    scale: 0;
+    scale: 0.9;
+    opacity: 0;
   }
   40% {
     scale: 1.1;
@@ -28,7 +29,22 @@
 }
 
 .spring-leave-to {
-  scale: 0;
+  scale: 0.96;
   translate: 0 0 !important;
   opacity: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .spring-enter-active {
+    animation: none;
+    transition: opacity 0.2s ease;
+  }
+  .spring-leave-active {
+    transition-property: opacity;
+  }
+  .spring-enter-from,
+  .spring-leave-to {
+    scale: 1;
+    opacity: 0;
+  }
+}

package/dist/transitions/spring.scss

@@ -2,7 +2,8 @@
 // 避免动画与拖拽内联样式互相覆盖、动画结束瞬间内联 transform 反扑导致跳帧
 @keyframes spring-in {
   0% {
-    scale: 0;
+    scale: 0.9;
+    opacity: 0;
   }
   40% {
     scale: 1.1;
@@ -34,8 +35,26 @@
 }
 
 .spring-leave-to {
-  scale: 0;
+  scale: 0.96;
   // 离开时归位到中心 (即便此前被拖拽过), 与原行为一致; !important 用于覆盖拖拽内联样式
   translate: 0 0 !important;
   opacity: 0;
 }
+
+// 减弱动态效果：不缩放，只保留透明度
+@media (prefers-reduced-motion: reduce) {
+  .spring-enter-active {
+    animation: none;
+    transition: opacity 0.2s ease;
+  }
+
+  .spring-leave-active {
+    transition-property: opacity;
+  }
+
+  .spring-enter-from,
+  .spring-leave-to {
+    scale: 1;
+    opacity: 0;
+  }
+}

package/dist/transitions/zoom-in.css

@@ -14,30 +14,30 @@
 .zoom-in-right-enter-active,
 .zoom-in-top-enter-active,
 .zoom-in-bottom-enter-active {
-  transition: opacity 0.15s ease-in, transform 0.15s ease-in;
+  transition: opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1), transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
 }
 .zoom-in-leave-active,
 .zoom-in-left-leave-active,
 .zoom-in-right-leave-active,
 .zoom-in-top-leave-active,
 .zoom-in-bottom-leave-active {
-  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  transition: opacity 0.12s cubic-bezier(0.23, 1, 0.32, 1), transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .zoom-in-left-enter-from, .zoom-in-left-leave-to,
 .zoom-in-right-enter-from,
 .zoom-in-right-leave-to {
-  transform: scaleX(0.8);
+  transform: scaleX(0.9);
 }
 
 .zoom-in-top-enter-from, .zoom-in-top-leave-to,
 .zoom-in-bottom-enter-from,
 .zoom-in-bottom-leave-to {
-  transform: scaleY(0.8);
+  transform: scaleY(0.9);
 }
 
 .zoom-in-enter-from, .zoom-in-leave-to {
-  transform: scale(0.8);
+  transform: scale(0.9);
 }
 
 .zoom-in-left-enter-active, .zoom-in-left-leave-active {
@@ -55,3 +55,31 @@
 .zoom-in-bottom-enter-active, .zoom-in-bottom-leave-active {
   transform-origin: center bottom;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .zoom-in-enter-active,
+  .zoom-in-leave-active,
+  .zoom-in-left-enter-active,
+  .zoom-in-left-leave-active,
+  .zoom-in-right-enter-active,
+  .zoom-in-right-leave-active,
+  .zoom-in-top-enter-active,
+  .zoom-in-top-leave-active,
+  .zoom-in-bottom-enter-active,
+  .zoom-in-bottom-leave-active {
+    transition-property: opacity;
+  }
+  .zoom-in-enter-from,
+  .zoom-in-leave-to,
+  .zoom-in-left-enter-from,
+  .zoom-in-left-leave-to,
+  .zoom-in-right-enter-from,
+  .zoom-in-right-leave-to,
+  .zoom-in-top-enter-from,
+  .zoom-in-top-leave-to,
+  .zoom-in-bottom-enter-from,
+  .zoom-in-bottom-leave-to {
+    transform: none;
+    opacity: 0;
+  }
+}

package/dist/transitions/zoom-in.scss

@@ -10,14 +10,15 @@
 
   &-enter-active {
     transition:
-      opacity 0.15s ease-in,
-      transform 0.15s ease-in;
+      opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1),
+      transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
   }
 
+  // 出场比入场快
   &-leave-active {
     transition:
-      opacity 0.15s ease-out,
-      transform 0.15s ease-out;
+      opacity 0.12s cubic-bezier(0.23, 1, 0.32, 1),
+      transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
   }
 }
 
@@ -25,7 +26,7 @@
 .zoom-in-right {
   &-enter-from,
   &-leave-to {
-    transform: scaleX(0.8);
+    transform: scaleX(0.9);
   }
 }
 
@@ -33,14 +34,14 @@
 .zoom-in-bottom {
   &-enter-from,
   &-leave-to {
-    transform: scaleY(0.8);
+    transform: scaleY(0.9);
   }
 }
 
 .zoom-in {
   &-enter-from,
   &-leave-to {
-    transform: scale(0.8);
+    transform: scale(0.9);
   }
 }
 
@@ -71,3 +72,33 @@
     transform-origin: center bottom;
   }
 }
+
+// 减弱动态效果：不缩放，只保留透明度
+@media (prefers-reduced-motion: reduce) {
+  .zoom-in-enter-active,
+  .zoom-in-leave-active,
+  .zoom-in-left-enter-active,
+  .zoom-in-left-leave-active,
+  .zoom-in-right-enter-active,
+  .zoom-in-right-leave-active,
+  .zoom-in-top-enter-active,
+  .zoom-in-top-leave-active,
+  .zoom-in-bottom-enter-active,
+  .zoom-in-bottom-leave-active {
+    transition-property: opacity;
+  }
+
+  .zoom-in-enter-from,
+  .zoom-in-leave-to,
+  .zoom-in-left-enter-from,
+  .zoom-in-left-leave-to,
+  .zoom-in-right-enter-from,
+  .zoom-in-right-leave-to,
+  .zoom-in-top-enter-from,
+  .zoom-in-top-leave-to,
+  .zoom-in-bottom-enter-from,
+  .zoom-in-bottom-leave-to {
+    transform: none;
+    opacity: 0;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/styles",
-  "version": "1.14.1",
+  "version": "1.15.1",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"

package/src/theme/presets/light.ts

@@ -68,7 +68,7 @@ export const lightTheme: UITheme = new UITheme(
       normal: '0.25s',
       slow: '0.35s',
       ease: 'cubic-bezier(0.4, 0, 0.2, 1)',
-      easeOut: 'cubic-bezier(0, 0, 0.2, 1)'
+      easeOut: 'cubic-bezier(0.23, 1, 0.32, 1)'
     },
 
     gap: defineBySize({ small: 6, default: 8, large: 12 }),

package/src/transitions/fade-scale.scss

@@ -4,23 +4,37 @@
 .fade-scale-enter-active {
   will-change: scale, opacity;
   transition:
-    scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
-    opacity 0.35s ease;
+    scale 200ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .fade-scale-leave-active {
   will-change: scale, opacity;
   transition:
-    scale 0.2s ease-in,
-    opacity 0.15s ease-in;
+    scale 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .fade-scale-enter-from {
-  scale: 0.8;
+  scale: 0.96;
   opacity: 0;
 }
 
 .fade-scale-leave-to {
-  scale: 0.9;
+  scale: 0.98;
   opacity: 0;
 }
+
+// 减弱动态效果：不缩放，只保留透明度
+@media (prefers-reduced-motion: reduce) {
+  .fade-scale-enter-active,
+  .fade-scale-leave-active {
+    transition-property: opacity;
+  }
+
+  .fade-scale-enter-from,
+  .fade-scale-leave-to {
+    scale: 1;
+    opacity: 0;
+  }
+}

package/src/transitions/slide.scss

@@ -5,11 +5,17 @@
     opacity: 0;
   }
 
-  &-enter-active,
+  &-enter-active {
+    transition:
+      transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  // 出场比入场快
   &-leave-active {
     transition:
-      transform 0.2s cubic-bezier(0, 0, 0.2, 1),
-      opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
+      transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1);
   }
 }
 
@@ -26,3 +32,21 @@
     transform: translateY(10px);
   }
 }
+
+// 减弱动态效果：不位移，只保留透明度
+@media (prefers-reduced-motion: reduce) {
+  .slide-down-enter-active,
+  .slide-down-leave-active,
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition-property: opacity;
+  }
+
+  .slide-down-enter-from,
+  .slide-down-leave-to,
+  .slide-up-enter-from,
+  .slide-up-leave-to {
+    transform: none;
+    opacity: 0;
+  }
+}

package/src/transitions/spring.scss

@@ -2,7 +2,8 @@
 // 避免动画与拖拽内联样式互相覆盖、动画结束瞬间内联 transform 反扑导致跳帧
 @keyframes spring-in {
   0% {
-    scale: 0;
+    scale: 0.9;
+    opacity: 0;
   }
   40% {
     scale: 1.1;
@@ -34,8 +35,26 @@
 }
 
 .spring-leave-to {
-  scale: 0;
+  scale: 0.96;
   // 离开时归位到中心 (即便此前被拖拽过), 与原行为一致; !important 用于覆盖拖拽内联样式
   translate: 0 0 !important;
   opacity: 0;
 }
+
+// 减弱动态效果：不缩放，只保留透明度
+@media (prefers-reduced-motion: reduce) {
+  .spring-enter-active {
+    animation: none;
+    transition: opacity 0.2s ease;
+  }
+
+  .spring-leave-active {
+    transition-property: opacity;
+  }
+
+  .spring-enter-from,
+  .spring-leave-to {
+    scale: 1;
+    opacity: 0;
+  }
+}

package/src/transitions/zoom-in.scss

@@ -10,14 +10,15 @@
 
   &-enter-active {
     transition:
-      opacity 0.15s ease-in,
-      transform 0.15s ease-in;
+      opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1),
+      transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
   }
 
+  // 出场比入场快
   &-leave-active {
     transition:
-      opacity 0.15s ease-out,
-      transform 0.15s ease-out;
+      opacity 0.12s cubic-bezier(0.23, 1, 0.32, 1),
+      transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
   }
 }
 
@@ -25,7 +26,7 @@
 .zoom-in-right {
   &-enter-from,
   &-leave-to {
-    transform: scaleX(0.8);
+    transform: scaleX(0.9);
   }
 }
 
@@ -33,14 +34,14 @@
 .zoom-in-bottom {
   &-enter-from,
   &-leave-to {
-    transform: scaleY(0.8);
+    transform: scaleY(0.9);
   }
 }
 
 .zoom-in {
   &-enter-from,
   &-leave-to {
-    transform: scale(0.8);
+    transform: scale(0.9);
   }
 }
 
@@ -71,3 +72,33 @@
     transform-origin: center bottom;
   }
 }
+
+// 减弱动态效果：不缩放，只保留透明度
+@media (prefers-reduced-motion: reduce) {
+  .zoom-in-enter-active,
+  .zoom-in-leave-active,
+  .zoom-in-left-enter-active,
+  .zoom-in-left-leave-active,
+  .zoom-in-right-enter-active,
+  .zoom-in-right-leave-active,
+  .zoom-in-top-enter-active,
+  .zoom-in-top-leave-active,
+  .zoom-in-bottom-enter-active,
+  .zoom-in-bottom-leave-active {
+    transition-property: opacity;
+  }
+
+  .zoom-in-enter-from,
+  .zoom-in-leave-to,
+  .zoom-in-left-enter-from,
+  .zoom-in-left-leave-to,
+  .zoom-in-right-enter-from,
+  .zoom-in-right-leave-to,
+  .zoom-in-top-enter-from,
+  .zoom-in-top-leave-to,
+  .zoom-in-bottom-enter-from,
+  .zoom-in-bottom-leave-to {
+    transform: none;
+    opacity: 0;
+  }
+}