@veltra/styles 1.14.0 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/theme/presets/light.js +1 -1
  2. package/dist/theme/presets/light.js.map +1 -1
  3. package/dist/transitions/fade-scale.css +16 -4
  4. package/dist/transitions/fade-scale.scss +20 -6
  5. package/dist/transitions/slide.css +17 -1
  6. package/dist/transitions/slide.scss +20 -2
  7. package/dist/transitions/zoom-in.css +33 -8
  8. package/dist/transitions/zoom-in.scss +33 -8
  9. package/package.json +1 -1
  10. package/src/theme/presets/light.ts +1 -1
  11. package/src/transitions/fade-scale.scss +20 -6
  12. package/src/transitions/slide.scss +20 -2
  13. package/src/transitions/zoom-in.scss +33 -8
package/dist/theme/presets/light.js CHANGED
@@ -80,7 +80,7 @@ const lightTheme = new UITheme({
80
80
  normal: "0.25s",
81
81
  slow: "0.35s",
82
82
  ease: "cubic-bezier(0.4, 0, 0.2, 1)",
83
- easeOut: "cubic-bezier(0, 0, 0.2, 1)"
83
+ easeOut: "cubic-bezier(0.23, 1, 0.32, 1)"
84
84
  },
85
85
  gap: defineBySize({
86
86
  small: 6,
package/dist/theme/presets/light.js.map CHANGED
@@ -1 +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"}
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.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 CHANGED
@@ -1,19 +1,31 @@
1
1
  .fade-scale-enter-active {
2
2
  will-change: scale, opacity;
3
- transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
3
+ transition: scale 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
4
4
  }
5
5
 
6
6
  .fade-scale-leave-active {
7
7
  will-change: scale, opacity;
8
- transition: scale 0.2s ease-in, opacity 0.15s ease-in;
8
+ transition: scale 160ms cubic-bezier(0.23, 1, 0.32, 1), opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
9
9
  }
10
10
 
11
11
  .fade-scale-enter-from {
12
- scale: 0.8;
12
+ scale: 0.96;
13
13
  opacity: 0;
14
14
  }
15
15
 
16
16
  .fade-scale-leave-to {
17
- scale: 0.9;
17
+ scale: 0.98;
18
18
  opacity: 0;
19
19
  }
20
+
21
+ @media (prefers-reduced-motion: reduce) {
22
+ .fade-scale-enter-active,
23
+ .fade-scale-leave-active {
24
+ transition-property: opacity;
25
+ }
26
+ .fade-scale-enter-from,
27
+ .fade-scale-leave-to {
28
+ scale: 1;
29
+ opacity: 0;
30
+ }
31
+ }
package/dist/transitions/fade-scale.scss CHANGED
@@ -4,23 +4,37 @@
4
4
  .fade-scale-enter-active {
5
5
  will-change: scale, opacity;
6
6
  transition:
7
- scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
8
- opacity 0.35s ease;
7
+ scale 200ms cubic-bezier(0.23, 1, 0.32, 1),
8
+ opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
9
9
  }
10
10
 
11
11
  .fade-scale-leave-active {
12
12
  will-change: scale, opacity;
13
13
  transition:
14
- scale 0.2s ease-in,
15
- opacity 0.15s ease-in;
14
+ scale 160ms cubic-bezier(0.23, 1, 0.32, 1),
15
+ opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
16
16
  }
17
17
 
18
18
  .fade-scale-enter-from {
19
- scale: 0.8;
19
+ scale: 0.96;
20
20
  opacity: 0;
21
21
  }
22
22
 
23
23
  .fade-scale-leave-to {
24
- scale: 0.9;
24
+ scale: 0.98;
25
25
  opacity: 0;
26
26
  }
27
+
28
+ // 减弱动态效果：不缩放，只保留透明度
29
+ @media (prefers-reduced-motion: reduce) {
30
+ .fade-scale-enter-active,
31
+ .fade-scale-leave-active {
32
+ transition-property: opacity;
33
+ }
34
+
35
+ .fade-scale-enter-from,
36
+ .fade-scale-leave-to {
37
+ scale: 1;
38
+ opacity: 0;
39
+ }
40
+ }
package/dist/transitions/slide.css CHANGED
@@ -6,7 +6,7 @@
6
6
  .slide-down-enter-active, .slide-down-leave-active,
7
7
  .slide-up-enter-active,
8
8
  .slide-up-leave-active {
9
- transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1), opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
9
+ transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
10
10
  }
11
11
 
12
12
  .slide-down-enter-from, .slide-down-leave-to {
@@ -16,3 +16,19 @@
16
16
  .slide-up-enter-from, .slide-up-leave-to {
17
17
  transform: translateY(10px);
18
18
  }
19
+
20
+ @media (prefers-reduced-motion: reduce) {
21
+ .slide-down-enter-active,
22
+ .slide-down-leave-active,
23
+ .slide-up-enter-active,
24
+ .slide-up-leave-active {
25
+ transition-property: opacity;
26
+ }
27
+ .slide-down-enter-from,
28
+ .slide-down-leave-to,
29
+ .slide-up-enter-from,
30
+ .slide-up-leave-to {
31
+ transform: none;
32
+ opacity: 0;
33
+ }
34
+ }
package/dist/transitions/slide.scss CHANGED
@@ -8,8 +8,8 @@
8
8
  &-enter-active,
9
9
  &-leave-active {
10
10
  transition:
11
- transform 0.2s cubic-bezier(0, 0, 0.2, 1),
12
- opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
11
+ transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
12
+ opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
13
13
  }
14
14
  }
15
15
 
@@ -26,3 +26,21 @@
26
26
  transform: translateY(10px);
27
27
  }
28
28
  }
29
+
30
+ // 减弱动态效果：不位移，只保留透明度
31
+ @media (prefers-reduced-motion: reduce) {
32
+ .slide-down-enter-active,
33
+ .slide-down-leave-active,
34
+ .slide-up-enter-active,
35
+ .slide-up-leave-active {
36
+ transition-property: opacity;
37
+ }
38
+
39
+ .slide-down-enter-from,
40
+ .slide-down-leave-to,
41
+ .slide-up-enter-from,
42
+ .slide-up-leave-to {
43
+ transform: none;
44
+ opacity: 0;
45
+ }
46
+ }
package/dist/transitions/zoom-in.css CHANGED
@@ -9,19 +9,16 @@
9
9
  .zoom-in-bottom-leave-to {
10
10
  opacity: 0;
11
11
  }
12
- .zoom-in-enter-active,
12
+ .zoom-in-enter-active, .zoom-in-leave-active,
13
13
  .zoom-in-left-enter-active,
14
- .zoom-in-right-enter-active,
15
- .zoom-in-top-enter-active,
16
- .zoom-in-bottom-enter-active {
17
- transition: opacity 0.15s ease-in, transform 0.15s ease-in;
18
- }
19
- .zoom-in-leave-active,
20
14
  .zoom-in-left-leave-active,
15
+ .zoom-in-right-enter-active,
21
16
  .zoom-in-right-leave-active,
17
+ .zoom-in-top-enter-active,
22
18
  .zoom-in-top-leave-active,
19
+ .zoom-in-bottom-enter-active,
23
20
  .zoom-in-bottom-leave-active {
24
- transition: opacity 0.15s ease-out, transform 0.15s ease-out;
21
+ transition: opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1), transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
25
22
  }
26
23
 
27
24
  .zoom-in-left-enter-from, .zoom-in-left-leave-to,
@@ -55,3 +52,31 @@
55
52
  .zoom-in-bottom-enter-active, .zoom-in-bottom-leave-active {
56
53
  transform-origin: center bottom;
57
54
  }
55
+
56
+ @media (prefers-reduced-motion: reduce) {
57
+ .zoom-in-enter-active,
58
+ .zoom-in-leave-active,
59
+ .zoom-in-left-enter-active,
60
+ .zoom-in-left-leave-active,
61
+ .zoom-in-right-enter-active,
62
+ .zoom-in-right-leave-active,
63
+ .zoom-in-top-enter-active,
64
+ .zoom-in-top-leave-active,
65
+ .zoom-in-bottom-enter-active,
66
+ .zoom-in-bottom-leave-active {
67
+ transition-property: opacity;
68
+ }
69
+ .zoom-in-enter-from,
70
+ .zoom-in-leave-to,
71
+ .zoom-in-left-enter-from,
72
+ .zoom-in-left-leave-to,
73
+ .zoom-in-right-enter-from,
74
+ .zoom-in-right-leave-to,
75
+ .zoom-in-top-enter-from,
76
+ .zoom-in-top-leave-to,
77
+ .zoom-in-bottom-enter-from,
78
+ .zoom-in-bottom-leave-to {
79
+ transform: none;
80
+ opacity: 0;
81
+ }
82
+ }
package/dist/transitions/zoom-in.scss CHANGED
@@ -8,16 +8,11 @@
8
8
  opacity: 0;
9
9
  }
10
10
 
11
- &-enter-active {
12
- transition:
13
- opacity 0.15s ease-in,
14
- transform 0.15s ease-in;
15
- }
16
-
11
+ &-enter-active,
17
12
  &-leave-active {
18
13
  transition:
19
- opacity 0.15s ease-out,
20
- transform 0.15s ease-out;
14
+ opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1),
15
+ transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
21
16
  }
22
17
  }
23
18
 
@@ -71,3 +66,33 @@
71
66
  transform-origin: center bottom;
72
67
  }
73
68
  }
69
+
70
+ // 减弱动态效果：不缩放，只保留透明度
71
+ @media (prefers-reduced-motion: reduce) {
72
+ .zoom-in-enter-active,
73
+ .zoom-in-leave-active,
74
+ .zoom-in-left-enter-active,
75
+ .zoom-in-left-leave-active,
76
+ .zoom-in-right-enter-active,
77
+ .zoom-in-right-leave-active,
78
+ .zoom-in-top-enter-active,
79
+ .zoom-in-top-leave-active,
80
+ .zoom-in-bottom-enter-active,
81
+ .zoom-in-bottom-leave-active {
82
+ transition-property: opacity;
83
+ }
84
+
85
+ .zoom-in-enter-from,
86
+ .zoom-in-leave-to,
87
+ .zoom-in-left-enter-from,
88
+ .zoom-in-left-leave-to,
89
+ .zoom-in-right-enter-from,
90
+ .zoom-in-right-leave-to,
91
+ .zoom-in-top-enter-from,
92
+ .zoom-in-top-leave-to,
93
+ .zoom-in-bottom-enter-from,
94
+ .zoom-in-bottom-leave-to {
95
+ transform: none;
96
+ opacity: 0;
97
+ }
98
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veltra/styles",
3
- "version": "1.14.0",
3
+ "version": "1.15.0",
4
4
  "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
5
5
  "bugs": {
6
6
  "url": "https://github.com/cabinet-fe/ultra-ui/issues"
package/src/theme/presets/light.ts CHANGED
@@ -68,7 +68,7 @@ export const lightTheme: UITheme = new UITheme(
68
68
  normal: '0.25s',
69
69
  slow: '0.35s',
70
70
  ease: 'cubic-bezier(0.4, 0, 0.2, 1)',
71
- easeOut: 'cubic-bezier(0, 0, 0.2, 1)'
71
+ easeOut: 'cubic-bezier(0.23, 1, 0.32, 1)'
72
72
  },
73
73
 
74
74
  gap: defineBySize({ small: 6, default: 8, large: 12 }),
package/src/transitions/fade-scale.scss CHANGED
@@ -4,23 +4,37 @@
4
4
  .fade-scale-enter-active {
5
5
  will-change: scale, opacity;
6
6
  transition:
7
- scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
8
- opacity 0.35s ease;
7
+ scale 200ms cubic-bezier(0.23, 1, 0.32, 1),
8
+ opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
9
9
  }
10
10
 
11
11
  .fade-scale-leave-active {
12
12
  will-change: scale, opacity;
13
13
  transition:
14
- scale 0.2s ease-in,
15
- opacity 0.15s ease-in;
14
+ scale 160ms cubic-bezier(0.23, 1, 0.32, 1),
15
+ opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
16
16
  }
17
17
 
18
18
  .fade-scale-enter-from {
19
- scale: 0.8;
19
+ scale: 0.96;
20
20
  opacity: 0;
21
21
  }
22
22
 
23
23
  .fade-scale-leave-to {
24
- scale: 0.9;
24
+ scale: 0.98;
25
25
  opacity: 0;
26
26
  }
27
+
28
+ // 减弱动态效果：不缩放，只保留透明度
29
+ @media (prefers-reduced-motion: reduce) {
30
+ .fade-scale-enter-active,
31
+ .fade-scale-leave-active {
32
+ transition-property: opacity;
33
+ }
34
+
35
+ .fade-scale-enter-from,
36
+ .fade-scale-leave-to {
37
+ scale: 1;
38
+ opacity: 0;
39
+ }
40
+ }
package/src/transitions/slide.scss CHANGED
@@ -8,8 +8,8 @@
8
8
  &-enter-active,
9
9
  &-leave-active {
10
10
  transition:
11
- transform 0.2s cubic-bezier(0, 0, 0.2, 1),
12
- opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
11
+ transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
12
+ opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
13
13
  }
14
14
  }
15
15
 
@@ -26,3 +26,21 @@
26
26
  transform: translateY(10px);
27
27
  }
28
28
  }
29
+
30
+ // 减弱动态效果：不位移，只保留透明度
31
+ @media (prefers-reduced-motion: reduce) {
32
+ .slide-down-enter-active,
33
+ .slide-down-leave-active,
34
+ .slide-up-enter-active,
35
+ .slide-up-leave-active {
36
+ transition-property: opacity;
37
+ }
38
+
39
+ .slide-down-enter-from,
40
+ .slide-down-leave-to,
41
+ .slide-up-enter-from,
42
+ .slide-up-leave-to {
43
+ transform: none;
44
+ opacity: 0;
45
+ }
46
+ }
package/src/transitions/zoom-in.scss CHANGED
@@ -8,16 +8,11 @@
8
8
  opacity: 0;
9
9
  }
10
10
 
11
- &-enter-active {
12
- transition:
13
- opacity 0.15s ease-in,
14
- transform 0.15s ease-in;
15
- }
16
-
11
+ &-enter-active,
17
12
  &-leave-active {
18
13
  transition:
19
- opacity 0.15s ease-out,
20
- transform 0.15s ease-out;
14
+ opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1),
15
+ transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
21
16
  }
22
17
  }
23
18
 
@@ -71,3 +66,33 @@
71
66
  transform-origin: center bottom;
72
67
  }
73
68
  }
69
+
70
+ // 减弱动态效果：不缩放，只保留透明度
71
+ @media (prefers-reduced-motion: reduce) {
72
+ .zoom-in-enter-active,
73
+ .zoom-in-leave-active,
74
+ .zoom-in-left-enter-active,
75
+ .zoom-in-left-leave-active,
76
+ .zoom-in-right-enter-active,
77
+ .zoom-in-right-leave-active,
78
+ .zoom-in-top-enter-active,
79
+ .zoom-in-top-leave-active,
80
+ .zoom-in-bottom-enter-active,
81
+ .zoom-in-bottom-leave-active {
82
+ transition-property: opacity;
83
+ }
84
+
85
+ .zoom-in-enter-from,
86
+ .zoom-in-leave-to,
87
+ .zoom-in-left-enter-from,
88
+ .zoom-in-left-leave-to,
89
+ .zoom-in-right-enter-from,
90
+ .zoom-in-right-leave-to,
91
+ .zoom-in-top-enter-from,
92
+ .zoom-in-top-leave-to,
93
+ .zoom-in-bottom-enter-from,
94
+ .zoom-in-bottom-leave-to {
95
+ transform: none;
96
+ opacity: 0;
97
+ }
98
+ }