stellar-ui-v2 1.40.30 → 1.40.31
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.
|
@@ -90,7 +90,7 @@ export default {
|
|
|
90
90
|
| `show` | 控制动画，当值从`false`变为`true`时会触发一次动画 | `Boolean` | `false` | - | - |
|
|
91
91
|
| `type` | 动画类型，见下方`type`值说明 | `String` | - | - | - |
|
|
92
92
|
| `loop` | 是否循环执行。 | `Boolean` | `false` | - | - |
|
|
93
|
-
| `duration`|
|
|
93
|
+
| `duration`| 动画时长，支持 `1500`/`"1500"`/`"1500ms"`/`"1.5s"` | `Number/String` | `300` | - | - |
|
|
94
94
|
| `action` | 不能与 show 同时使用）触发方式，`initial`初始化执行; `click`点击执行 | `String` | - | - | - |
|
|
95
95
|
|
|
96
96
|
#### 动画类型(type)
|
|
@@ -114,4 +114,4 @@ export default {
|
|
|
114
114
|
| `default` | 默认插槽 | - |
|
|
115
115
|
|
|
116
116
|
---$
|
|
117
|
-
{{fuyuwei}}
|
|
117
|
+
{{fuyuwei}}
|
|
@@ -19,23 +19,23 @@
|
|
|
19
19
|
},
|
|
20
20
|
props: {
|
|
21
21
|
show: {
|
|
22
|
-
type:
|
|
22
|
+
type: Boolean,
|
|
23
23
|
default: false,
|
|
24
24
|
},
|
|
25
25
|
type: {
|
|
26
|
-
type:
|
|
26
|
+
type: String,
|
|
27
27
|
default: '',
|
|
28
28
|
},
|
|
29
29
|
loop: {
|
|
30
|
-
type:
|
|
30
|
+
type: Boolean,
|
|
31
31
|
default: false,
|
|
32
32
|
},
|
|
33
33
|
duration: {
|
|
34
|
-
type: [Number,
|
|
34
|
+
type: [Number, String],
|
|
35
35
|
default: 300,
|
|
36
36
|
},
|
|
37
37
|
action: {
|
|
38
|
-
type:
|
|
38
|
+
type: String,
|
|
39
39
|
default: '',
|
|
40
40
|
},
|
|
41
41
|
},
|
|
@@ -57,8 +57,10 @@
|
|
|
57
57
|
},
|
|
58
58
|
cmpRootStyle() {
|
|
59
59
|
let style = {};
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
const duration = this.normalizeDuration(this.duration);
|
|
61
|
+
if (duration) {
|
|
62
|
+
style.animationDuration = duration;
|
|
63
|
+
style['--ste-animate-duration'] = duration;
|
|
62
64
|
}
|
|
63
65
|
return style;
|
|
64
66
|
},
|
|
@@ -73,6 +75,25 @@
|
|
|
73
75
|
},
|
|
74
76
|
},
|
|
75
77
|
methods: {
|
|
78
|
+
normalizeDuration(duration) {
|
|
79
|
+
if (duration === null || duration === undefined || duration === '') {
|
|
80
|
+
return '';
|
|
81
|
+
}
|
|
82
|
+
if (typeof duration === 'number') {
|
|
83
|
+
return `${duration}ms`;
|
|
84
|
+
}
|
|
85
|
+
const val = String(duration).trim().toLowerCase();
|
|
86
|
+
if (!val) {
|
|
87
|
+
return '';
|
|
88
|
+
}
|
|
89
|
+
if (/^\d+(\.\d+)?$/.test(val)) {
|
|
90
|
+
return `${val}ms`;
|
|
91
|
+
}
|
|
92
|
+
if (/^\d+(\.\d+)?(ms|s)$/.test(val)) {
|
|
93
|
+
return val;
|
|
94
|
+
}
|
|
95
|
+
return '';
|
|
96
|
+
},
|
|
76
97
|
handleClick() {
|
|
77
98
|
if (this.action === 'click') {
|
|
78
99
|
this.animated();
|
|
@@ -176,7 +197,7 @@
|
|
|
176
197
|
border: 4rpx solid rgba(255, 255, 255, 0.6);
|
|
177
198
|
border-radius: 30px;
|
|
178
199
|
transform: scale(0);
|
|
179
|
-
animation: twinkle 2s ease-out infinite;
|
|
200
|
+
animation: twinkle var(--ste-animate-duration, 2s) ease-out infinite;
|
|
180
201
|
}
|
|
181
202
|
|
|
182
203
|
&::after {
|
|
@@ -199,8 +220,8 @@
|
|
|
199
220
|
filter: blur(6rpx);
|
|
200
221
|
opacity: 0.73;
|
|
201
222
|
transform: skew(-20deg);
|
|
202
|
-
animation: flicker 1.5s linear infinite;
|
|
223
|
+
animation: flicker var(--ste-animate-duration, 1.5s) linear infinite;
|
|
203
224
|
}
|
|
204
225
|
}
|
|
205
226
|
}
|
|
206
|
-
</style>
|
|
227
|
+
</style>
|