@douyinfe/semi-foundation 2.38.3-alpha.2-path-settimeout → 2.38.3-alpha.2-patch-2395
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.
- package/button/iconButton.scss +29 -1
- package/lib/cjs/button/iconButton.css +26 -1
- package/lib/cjs/button/iconButton.scss +29 -1
- package/lib/cjs/overflowList/constants.d.ts +1 -1
- package/lib/cjs/spin/animation.scss +3 -2
- package/lib/cjs/spin/spin.css +19 -1
- package/lib/cjs/spin/spin.scss +20 -0
- package/lib/cjs/tree/treeUtil.d.ts +1 -1
- package/lib/cjs/upload/constants.d.ts +1 -1
- package/lib/es/button/iconButton.css +26 -1
- package/lib/es/button/iconButton.scss +29 -1
- package/lib/es/overflowList/constants.d.ts +1 -1
- package/lib/es/spin/animation.scss +3 -2
- package/lib/es/spin/spin.css +19 -1
- package/lib/es/spin/spin.scss +20 -0
- package/lib/es/tree/treeUtil.d.ts +1 -1
- package/lib/es/upload/constants.d.ts +1 -1
- package/package.json +3 -3
- package/spin/animation.scss +3 -2
- package/spin/spin.scss +20 -0
package/button/iconButton.scss
CHANGED
|
@@ -4,6 +4,30 @@
|
|
|
4
4
|
$module: #{$prefix}-button;
|
|
5
5
|
|
|
6
6
|
.#{$module} {
|
|
7
|
+
@keyframes #{$prefix}-animation-rotate {
|
|
8
|
+
from {
|
|
9
|
+
transform: rotate(0);
|
|
10
|
+
}
|
|
11
|
+
to {
|
|
12
|
+
transform: rotate(360deg);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@keyframes #{$prefix}-animation-circle {
|
|
17
|
+
0% {
|
|
18
|
+
stroke-dasharray: 1, 220;
|
|
19
|
+
stroke-dashoffset: 0;
|
|
20
|
+
}
|
|
21
|
+
50% {
|
|
22
|
+
stroke-dasharray: 150, 220;
|
|
23
|
+
stroke-dashoffset: -68px;
|
|
24
|
+
}
|
|
25
|
+
100% {
|
|
26
|
+
stroke-dasharray: 150, 220;
|
|
27
|
+
stroke-dashoffset: -218px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
7
31
|
&.#{$module}-with-icon {
|
|
8
32
|
display: inline-flex;
|
|
9
33
|
align-items: center;
|
|
@@ -24,8 +48,12 @@ $module: #{$prefix}-button;
|
|
|
24
48
|
&>svg {
|
|
25
49
|
width: 16px;
|
|
26
50
|
height: 16px;
|
|
27
|
-
animation:
|
|
51
|
+
animation: 1200ms linear infinite #{$prefix}-animation-rotate;
|
|
28
52
|
animation-fill-mode: forwards;
|
|
53
|
+
|
|
54
|
+
& > circle {
|
|
55
|
+
animation: 2500ms ease-in-out infinite #{$prefix}-animation-circle;
|
|
56
|
+
}
|
|
29
57
|
}
|
|
30
58
|
}
|
|
31
59
|
}
|
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
/* shadow */
|
|
2
2
|
/* sizing */
|
|
3
3
|
/* spacing */
|
|
4
|
+
@keyframes semi-animation-rotate {
|
|
5
|
+
from {
|
|
6
|
+
transform: rotate(0);
|
|
7
|
+
}
|
|
8
|
+
to {
|
|
9
|
+
transform: rotate(360deg);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
@keyframes semi-animation-circle {
|
|
13
|
+
0% {
|
|
14
|
+
stroke-dasharray: 1, 220;
|
|
15
|
+
stroke-dashoffset: 0;
|
|
16
|
+
}
|
|
17
|
+
50% {
|
|
18
|
+
stroke-dasharray: 150, 220;
|
|
19
|
+
stroke-dashoffset: -68px;
|
|
20
|
+
}
|
|
21
|
+
100% {
|
|
22
|
+
stroke-dasharray: 150, 220;
|
|
23
|
+
stroke-dashoffset: -218px;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
4
26
|
.semi-button.semi-button-with-icon {
|
|
5
27
|
display: inline-flex;
|
|
6
28
|
align-items: center;
|
|
@@ -17,9 +39,12 @@
|
|
|
17
39
|
.semi-button.semi-button-loading .semi-button-content > svg {
|
|
18
40
|
width: 16px;
|
|
19
41
|
height: 16px;
|
|
20
|
-
animation:
|
|
42
|
+
animation: 1200ms linear infinite semi-animation-rotate;
|
|
21
43
|
animation-fill-mode: forwards;
|
|
22
44
|
}
|
|
45
|
+
.semi-button.semi-button-loading .semi-button-content > svg > circle {
|
|
46
|
+
animation: 2500ms ease-in-out infinite semi-animation-circle;
|
|
47
|
+
}
|
|
23
48
|
.semi-button.semi-button-with-icon-only {
|
|
24
49
|
padding-left: 8px;
|
|
25
50
|
padding-right: 8px;
|
|
@@ -4,6 +4,30 @@
|
|
|
4
4
|
$module: #{$prefix}-button;
|
|
5
5
|
|
|
6
6
|
.#{$module} {
|
|
7
|
+
@keyframes #{$prefix}-animation-rotate {
|
|
8
|
+
from {
|
|
9
|
+
transform: rotate(0);
|
|
10
|
+
}
|
|
11
|
+
to {
|
|
12
|
+
transform: rotate(360deg);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@keyframes #{$prefix}-animation-circle {
|
|
17
|
+
0% {
|
|
18
|
+
stroke-dasharray: 1, 220;
|
|
19
|
+
stroke-dashoffset: 0;
|
|
20
|
+
}
|
|
21
|
+
50% {
|
|
22
|
+
stroke-dasharray: 150, 220;
|
|
23
|
+
stroke-dashoffset: -68px;
|
|
24
|
+
}
|
|
25
|
+
100% {
|
|
26
|
+
stroke-dasharray: 150, 220;
|
|
27
|
+
stroke-dashoffset: -218px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
7
31
|
&.#{$module}-with-icon {
|
|
8
32
|
display: inline-flex;
|
|
9
33
|
align-items: center;
|
|
@@ -24,8 +48,12 @@ $module: #{$prefix}-button;
|
|
|
24
48
|
&>svg {
|
|
25
49
|
width: 16px;
|
|
26
50
|
height: 16px;
|
|
27
|
-
animation:
|
|
51
|
+
animation: 1200ms linear infinite #{$prefix}-animation-rotate;
|
|
28
52
|
animation-fill-mode: forwards;
|
|
53
|
+
|
|
54
|
+
& > circle {
|
|
55
|
+
animation: 2500ms ease-in-out infinite #{$prefix}-animation-circle;
|
|
56
|
+
}
|
|
29
57
|
}
|
|
30
58
|
}
|
|
31
59
|
}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
$animation_duration-spin_wrapper-spin:
|
|
2
|
-
$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
|
|
1
|
+
$animation_duration-spin_wrapper-spin: 1200ms; // 加载图标容器旋转一周时长
|
|
2
|
+
$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
|
|
3
|
+
$animation_duration-spin_wrapper-spin-circle: 2500ms; // 加载图标弹性运动一周时长
|
package/lib/cjs/spin/spin.css
CHANGED
|
@@ -15,6 +15,20 @@
|
|
|
15
15
|
transform: rotate(360deg);
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
+
@keyframes semi-animation-circle {
|
|
19
|
+
0% {
|
|
20
|
+
stroke-dasharray: 1, 220;
|
|
21
|
+
stroke-dashoffset: 0;
|
|
22
|
+
}
|
|
23
|
+
50% {
|
|
24
|
+
stroke-dasharray: 150, 220;
|
|
25
|
+
stroke-dashoffset: -68px;
|
|
26
|
+
}
|
|
27
|
+
100% {
|
|
28
|
+
stroke-dasharray: 150, 220;
|
|
29
|
+
stroke-dashoffset: -218px;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
18
32
|
.semi-spin-wrapper {
|
|
19
33
|
text-align: center;
|
|
20
34
|
position: absolute;
|
|
@@ -24,12 +38,16 @@
|
|
|
24
38
|
color: var(--semi-color-primary);
|
|
25
39
|
}
|
|
26
40
|
.semi-spin-wrapper > svg {
|
|
27
|
-
|
|
41
|
+
display: inline;
|
|
42
|
+
animation: 1200ms linear infinite semi-animation-rotate;
|
|
28
43
|
animation-fill-mode: forwards;
|
|
29
44
|
vertical-align: top;
|
|
30
45
|
width: 20px;
|
|
31
46
|
height: 20px;
|
|
32
47
|
}
|
|
48
|
+
.semi-spin-wrapper > svg > circle {
|
|
49
|
+
animation: 2500ms ease-in-out infinite semi-animation-circle;
|
|
50
|
+
}
|
|
33
51
|
.semi-spin-animate {
|
|
34
52
|
display: inline-flex;
|
|
35
53
|
animation: 1600ms linear infinite semi-animation-rotate;
|
package/lib/cjs/spin/spin.scss
CHANGED
|
@@ -18,6 +18,21 @@ $module: #{$prefix}-spin;
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
@keyframes #{$prefix}-animation-circle {
|
|
22
|
+
0% {
|
|
23
|
+
stroke-dasharray: 1, 220;
|
|
24
|
+
stroke-dashoffset: 0;
|
|
25
|
+
}
|
|
26
|
+
50% {
|
|
27
|
+
stroke-dasharray: 150, 220;
|
|
28
|
+
stroke-dashoffset: -68px;
|
|
29
|
+
}
|
|
30
|
+
100% {
|
|
31
|
+
stroke-dasharray: 150, 220;
|
|
32
|
+
stroke-dashoffset: -218px;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
21
36
|
&-wrapper {
|
|
22
37
|
text-align: center;
|
|
23
38
|
position: absolute;
|
|
@@ -27,10 +42,15 @@ $module: #{$prefix}-spin;
|
|
|
27
42
|
color: $color-spin-bg;
|
|
28
43
|
|
|
29
44
|
& > svg {
|
|
45
|
+
display: inline;
|
|
30
46
|
animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
|
|
31
47
|
animation-fill-mode: forwards;
|
|
32
48
|
vertical-align: top;
|
|
33
49
|
@include size($width-spin_middle);
|
|
50
|
+
|
|
51
|
+
& > circle {
|
|
52
|
+
animation: $animation_duration-spin_wrapper-spin-circle ease-in-out infinite #{$prefix}-animation-circle;
|
|
53
|
+
}
|
|
34
54
|
}
|
|
35
55
|
}
|
|
36
56
|
|
|
@@ -75,6 +75,6 @@ export declare function getValueOrKey(data: any): any;
|
|
|
75
75
|
export declare function normalizeValue(value: any, withObject: boolean): any;
|
|
76
76
|
export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
|
|
77
77
|
export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
|
|
78
|
-
export declare function calcDropRelativePosition(event: any, treeNode: any):
|
|
78
|
+
export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
|
|
79
79
|
export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
|
|
80
80
|
export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;
|
|
@@ -18,7 +18,7 @@ declare const strings: {
|
|
|
18
18
|
DRAG_AREA_ILLEGAL: string;
|
|
19
19
|
TRIGGER_AUTO: "auto";
|
|
20
20
|
TRIGGER_CUSTOM: "custom";
|
|
21
|
-
UPLOAD_TRIGGER: ("
|
|
21
|
+
UPLOAD_TRIGGER: ("auto" | "custom")[];
|
|
22
22
|
VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
|
|
23
23
|
PROMPT_POSITION: readonly ["left", "right", "bottom"];
|
|
24
24
|
};
|
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
/* shadow */
|
|
2
2
|
/* sizing */
|
|
3
3
|
/* spacing */
|
|
4
|
+
@keyframes semi-animation-rotate {
|
|
5
|
+
from {
|
|
6
|
+
transform: rotate(0);
|
|
7
|
+
}
|
|
8
|
+
to {
|
|
9
|
+
transform: rotate(360deg);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
@keyframes semi-animation-circle {
|
|
13
|
+
0% {
|
|
14
|
+
stroke-dasharray: 1, 220;
|
|
15
|
+
stroke-dashoffset: 0;
|
|
16
|
+
}
|
|
17
|
+
50% {
|
|
18
|
+
stroke-dasharray: 150, 220;
|
|
19
|
+
stroke-dashoffset: -68px;
|
|
20
|
+
}
|
|
21
|
+
100% {
|
|
22
|
+
stroke-dasharray: 150, 220;
|
|
23
|
+
stroke-dashoffset: -218px;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
4
26
|
.semi-button.semi-button-with-icon {
|
|
5
27
|
display: inline-flex;
|
|
6
28
|
align-items: center;
|
|
@@ -17,9 +39,12 @@
|
|
|
17
39
|
.semi-button.semi-button-loading .semi-button-content > svg {
|
|
18
40
|
width: 16px;
|
|
19
41
|
height: 16px;
|
|
20
|
-
animation:
|
|
42
|
+
animation: 1200ms linear infinite semi-animation-rotate;
|
|
21
43
|
animation-fill-mode: forwards;
|
|
22
44
|
}
|
|
45
|
+
.semi-button.semi-button-loading .semi-button-content > svg > circle {
|
|
46
|
+
animation: 2500ms ease-in-out infinite semi-animation-circle;
|
|
47
|
+
}
|
|
23
48
|
.semi-button.semi-button-with-icon-only {
|
|
24
49
|
padding-left: 8px;
|
|
25
50
|
padding-right: 8px;
|
|
@@ -4,6 +4,30 @@
|
|
|
4
4
|
$module: #{$prefix}-button;
|
|
5
5
|
|
|
6
6
|
.#{$module} {
|
|
7
|
+
@keyframes #{$prefix}-animation-rotate {
|
|
8
|
+
from {
|
|
9
|
+
transform: rotate(0);
|
|
10
|
+
}
|
|
11
|
+
to {
|
|
12
|
+
transform: rotate(360deg);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@keyframes #{$prefix}-animation-circle {
|
|
17
|
+
0% {
|
|
18
|
+
stroke-dasharray: 1, 220;
|
|
19
|
+
stroke-dashoffset: 0;
|
|
20
|
+
}
|
|
21
|
+
50% {
|
|
22
|
+
stroke-dasharray: 150, 220;
|
|
23
|
+
stroke-dashoffset: -68px;
|
|
24
|
+
}
|
|
25
|
+
100% {
|
|
26
|
+
stroke-dasharray: 150, 220;
|
|
27
|
+
stroke-dashoffset: -218px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
7
31
|
&.#{$module}-with-icon {
|
|
8
32
|
display: inline-flex;
|
|
9
33
|
align-items: center;
|
|
@@ -24,8 +48,12 @@ $module: #{$prefix}-button;
|
|
|
24
48
|
&>svg {
|
|
25
49
|
width: 16px;
|
|
26
50
|
height: 16px;
|
|
27
|
-
animation:
|
|
51
|
+
animation: 1200ms linear infinite #{$prefix}-animation-rotate;
|
|
28
52
|
animation-fill-mode: forwards;
|
|
53
|
+
|
|
54
|
+
& > circle {
|
|
55
|
+
animation: 2500ms ease-in-out infinite #{$prefix}-animation-circle;
|
|
56
|
+
}
|
|
29
57
|
}
|
|
30
58
|
}
|
|
31
59
|
}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
$animation_duration-spin_wrapper-spin:
|
|
2
|
-
$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
|
|
1
|
+
$animation_duration-spin_wrapper-spin: 1200ms; // 加载图标容器旋转一周时长
|
|
2
|
+
$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
|
|
3
|
+
$animation_duration-spin_wrapper-spin-circle: 2500ms; // 加载图标弹性运动一周时长
|
package/lib/es/spin/spin.css
CHANGED
|
@@ -15,6 +15,20 @@
|
|
|
15
15
|
transform: rotate(360deg);
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
+
@keyframes semi-animation-circle {
|
|
19
|
+
0% {
|
|
20
|
+
stroke-dasharray: 1, 220;
|
|
21
|
+
stroke-dashoffset: 0;
|
|
22
|
+
}
|
|
23
|
+
50% {
|
|
24
|
+
stroke-dasharray: 150, 220;
|
|
25
|
+
stroke-dashoffset: -68px;
|
|
26
|
+
}
|
|
27
|
+
100% {
|
|
28
|
+
stroke-dasharray: 150, 220;
|
|
29
|
+
stroke-dashoffset: -218px;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
18
32
|
.semi-spin-wrapper {
|
|
19
33
|
text-align: center;
|
|
20
34
|
position: absolute;
|
|
@@ -24,12 +38,16 @@
|
|
|
24
38
|
color: var(--semi-color-primary);
|
|
25
39
|
}
|
|
26
40
|
.semi-spin-wrapper > svg {
|
|
27
|
-
|
|
41
|
+
display: inline;
|
|
42
|
+
animation: 1200ms linear infinite semi-animation-rotate;
|
|
28
43
|
animation-fill-mode: forwards;
|
|
29
44
|
vertical-align: top;
|
|
30
45
|
width: 20px;
|
|
31
46
|
height: 20px;
|
|
32
47
|
}
|
|
48
|
+
.semi-spin-wrapper > svg > circle {
|
|
49
|
+
animation: 2500ms ease-in-out infinite semi-animation-circle;
|
|
50
|
+
}
|
|
33
51
|
.semi-spin-animate {
|
|
34
52
|
display: inline-flex;
|
|
35
53
|
animation: 1600ms linear infinite semi-animation-rotate;
|
package/lib/es/spin/spin.scss
CHANGED
|
@@ -18,6 +18,21 @@ $module: #{$prefix}-spin;
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
@keyframes #{$prefix}-animation-circle {
|
|
22
|
+
0% {
|
|
23
|
+
stroke-dasharray: 1, 220;
|
|
24
|
+
stroke-dashoffset: 0;
|
|
25
|
+
}
|
|
26
|
+
50% {
|
|
27
|
+
stroke-dasharray: 150, 220;
|
|
28
|
+
stroke-dashoffset: -68px;
|
|
29
|
+
}
|
|
30
|
+
100% {
|
|
31
|
+
stroke-dasharray: 150, 220;
|
|
32
|
+
stroke-dashoffset: -218px;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
21
36
|
&-wrapper {
|
|
22
37
|
text-align: center;
|
|
23
38
|
position: absolute;
|
|
@@ -27,10 +42,15 @@ $module: #{$prefix}-spin;
|
|
|
27
42
|
color: $color-spin-bg;
|
|
28
43
|
|
|
29
44
|
& > svg {
|
|
45
|
+
display: inline;
|
|
30
46
|
animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
|
|
31
47
|
animation-fill-mode: forwards;
|
|
32
48
|
vertical-align: top;
|
|
33
49
|
@include size($width-spin_middle);
|
|
50
|
+
|
|
51
|
+
& > circle {
|
|
52
|
+
animation: $animation_duration-spin_wrapper-spin-circle ease-in-out infinite #{$prefix}-animation-circle;
|
|
53
|
+
}
|
|
34
54
|
}
|
|
35
55
|
}
|
|
36
56
|
|
|
@@ -75,6 +75,6 @@ export declare function getValueOrKey(data: any): any;
|
|
|
75
75
|
export declare function normalizeValue(value: any, withObject: boolean): any;
|
|
76
76
|
export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
|
|
77
77
|
export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
|
|
78
|
-
export declare function calcDropRelativePosition(event: any, treeNode: any):
|
|
78
|
+
export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
|
|
79
79
|
export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
|
|
80
80
|
export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;
|
|
@@ -18,7 +18,7 @@ declare const strings: {
|
|
|
18
18
|
DRAG_AREA_ILLEGAL: string;
|
|
19
19
|
TRIGGER_AUTO: "auto";
|
|
20
20
|
TRIGGER_CUSTOM: "custom";
|
|
21
|
-
UPLOAD_TRIGGER: ("
|
|
21
|
+
UPLOAD_TRIGGER: ("auto" | "custom")[];
|
|
22
22
|
VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
|
|
23
23
|
PROMPT_POSITION: readonly ["left", "right", "bottom"];
|
|
24
24
|
};
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-foundation",
|
|
3
|
-
"version": "2.38.3-alpha.2-
|
|
3
|
+
"version": "2.38.3-alpha.2-patch-2395",
|
|
4
4
|
"description": "",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build:lib": "node ./scripts/compileLib.js",
|
|
7
7
|
"prepublishOnly": "npm run build:lib"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@douyinfe/semi-animation": "2.38.3-alpha.2-
|
|
10
|
+
"@douyinfe/semi-animation": "2.38.3-alpha.2-patch-2395",
|
|
11
11
|
"async-validator": "^3.5.0",
|
|
12
12
|
"classnames": "^2.2.6",
|
|
13
13
|
"date-fns": "^2.29.3",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"*.scss",
|
|
24
24
|
"*.css"
|
|
25
25
|
],
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "0f229469b42b6f684a9c618153993896a438e303",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
29
29
|
"@babel/preset-env": "^7.15.8",
|
package/spin/animation.scss
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
$animation_duration-spin_wrapper-spin:
|
|
2
|
-
$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
|
|
1
|
+
$animation_duration-spin_wrapper-spin: 1200ms; // 加载图标容器旋转一周时长
|
|
2
|
+
$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
|
|
3
|
+
$animation_duration-spin_wrapper-spin-circle: 2500ms; // 加载图标弹性运动一周时长
|
package/spin/spin.scss
CHANGED
|
@@ -18,6 +18,21 @@ $module: #{$prefix}-spin;
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
@keyframes #{$prefix}-animation-circle {
|
|
22
|
+
0% {
|
|
23
|
+
stroke-dasharray: 1, 220;
|
|
24
|
+
stroke-dashoffset: 0;
|
|
25
|
+
}
|
|
26
|
+
50% {
|
|
27
|
+
stroke-dasharray: 150, 220;
|
|
28
|
+
stroke-dashoffset: -68px;
|
|
29
|
+
}
|
|
30
|
+
100% {
|
|
31
|
+
stroke-dasharray: 150, 220;
|
|
32
|
+
stroke-dashoffset: -218px;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
21
36
|
&-wrapper {
|
|
22
37
|
text-align: center;
|
|
23
38
|
position: absolute;
|
|
@@ -27,10 +42,15 @@ $module: #{$prefix}-spin;
|
|
|
27
42
|
color: $color-spin-bg;
|
|
28
43
|
|
|
29
44
|
& > svg {
|
|
45
|
+
display: inline;
|
|
30
46
|
animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
|
|
31
47
|
animation-fill-mode: forwards;
|
|
32
48
|
vertical-align: top;
|
|
33
49
|
@include size($width-spin_middle);
|
|
50
|
+
|
|
51
|
+
& > circle {
|
|
52
|
+
animation: $animation_duration-spin_wrapper-spin-circle ease-in-out infinite #{$prefix}-animation-circle;
|
|
53
|
+
}
|
|
34
54
|
}
|
|
35
55
|
}
|
|
36
56
|
|