From 38ce33c344566301d6483ad38422c2c0ec82e9fa Mon Sep 17 00:00:00 2001 From: Enoooch Date: Mon, 6 Dec 2021 19:12:21 +0800 Subject: [PATCH 1/2] feat: add prop transitionDuration --- src/index.vue | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/index.vue b/src/index.vue index ee23a4f..9991de3 100644 --- a/src/index.vue +++ b/src/index.vue @@ -3,7 +3,7 @@
@@ -71,6 +71,10 @@ export default { delay: { type: [String, Number], default: 0 + }, + transitionDuration: { + type: [String, Number], + default: 300 } }, data () { @@ -99,6 +103,11 @@ export default { }, ms) } }, + computed: { + transition() { + return `opacity ${+this.transitionDuration}ms` + }, + }, watch: { /** * Binding outside component value and inside component value. @@ -130,7 +139,6 @@ export default { right: 0; bottom: 0; left: 0; - transition: opacity .3s; } .velmld-spinner { top: 50%; From 6dbbca76f2066172660e40f783979b01d29880e2 Mon Sep 17 00:00:00 2001 From: Enoooch Date: Mon, 6 Dec 2021 19:18:43 +0800 Subject: [PATCH 2/2] docs(readme): add description of transition-duration --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 0e1d31b..c00f2b4 100755 --- a/README.md +++ b/README.md @@ -146,6 +146,7 @@ Use the `duration` parameter to set the animation loop duration in seconds (does | is-full-screen | Boolean | false | Loader will overlay the full page | | text | String | - | Text will appear below loader | | text-style | Object | {} | Change style of the text below loader | +| transition-duration | Number \| String | 300 | The minimum appearing duration of transition in milliseconds | # 🤝 Contributing