@douyinfe/semi-foundation 2.38.3-alpha.2-patch-table-datepicker-aria → 2.38.3-alpha.2-spin
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/navigation/subNavFoundation.js +3 -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/tooltip/foundation.js +1 -0
- package/lib/es/button/iconButton.css +26 -1
- package/lib/es/button/iconButton.scss +29 -1
- package/lib/es/navigation/subNavFoundation.js +3 -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/tooltip/foundation.js +1 -0
- package/navigation/subNavFoundation.ts +3 -1
- package/package.json +3 -3
- package/spin/animation.scss +3 -2
- package/spin/spin.scss +20 -0
- package/tooltip/foundation.ts +1 -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
|
}
|
|
@@ -33,7 +33,9 @@ class SubNavFoundation extends _foundation.default {
|
|
|
33
33
|
// this.log('invoke SubNavFoundation init()');
|
|
34
34
|
this._timer = null;
|
|
35
35
|
}
|
|
36
|
-
destroy() {
|
|
36
|
+
destroy() {
|
|
37
|
+
this.clearDelayTimer();
|
|
38
|
+
}
|
|
37
39
|
clearDelayTimer() {
|
|
38
40
|
if (this._timer) {
|
|
39
41
|
clearTimeout(this._timer);
|
|
@@ -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
|
|
|
@@ -235,6 +235,7 @@ class Tooltip extends _foundation.default {
|
|
|
235
235
|
this._adapter.unregisterClickOutsideHandler();
|
|
236
236
|
this.unBindResizeEvent();
|
|
237
237
|
this.unBindScrollEvent();
|
|
238
|
+
clearTimeout(this._timer);
|
|
238
239
|
}
|
|
239
240
|
_bindTriggerEvent(triggerEventSet) {
|
|
240
241
|
this._adapter.registerTriggerEvent(triggerEventSet);
|
|
@@ -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
|
}
|
|
@@ -26,7 +26,9 @@ export default class SubNavFoundation extends BaseFoundation {
|
|
|
26
26
|
// this.log('invoke SubNavFoundation init()');
|
|
27
27
|
this._timer = null;
|
|
28
28
|
}
|
|
29
|
-
destroy() {
|
|
29
|
+
destroy() {
|
|
30
|
+
this.clearDelayTimer();
|
|
31
|
+
}
|
|
30
32
|
clearDelayTimer() {
|
|
31
33
|
if (this._timer) {
|
|
32
34
|
clearTimeout(this._timer);
|
|
@@ -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
|
|
|
@@ -227,6 +227,7 @@ export default class Tooltip extends BaseFoundation {
|
|
|
227
227
|
this._adapter.unregisterClickOutsideHandler();
|
|
228
228
|
this.unBindResizeEvent();
|
|
229
229
|
this.unBindScrollEvent();
|
|
230
|
+
clearTimeout(this._timer);
|
|
230
231
|
}
|
|
231
232
|
_bindTriggerEvent(triggerEventSet) {
|
|
232
233
|
this._adapter.registerTriggerEvent(triggerEventSet);
|
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-spin",
|
|
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-spin",
|
|
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": "9ebe9a7f7d63097175ad03eef7a55cdd65a4c3c2",
|
|
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
|
|
package/tooltip/foundation.ts
CHANGED
|
@@ -115,6 +115,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
|
|
|
115
115
|
this._adapter.unregisterClickOutsideHandler();
|
|
116
116
|
this.unBindResizeEvent();
|
|
117
117
|
this.unBindScrollEvent();
|
|
118
|
+
clearTimeout(this._timer);
|
|
118
119
|
}
|
|
119
120
|
|
|
120
121
|
_bindTriggerEvent(triggerEventSet: Record<string, any>) {
|