by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: spinner may stop playing animation after dismiss (#5365)

Browse Source 
* fix: spinner may stop playing animation after dismiss

* fix: animation paused more safely
This commit is contained in:
Netfan 2025-01-12 15:43:44 +08:00 committed by GitHub
parent 8cf6e8ec75
commit 42e322012c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
View File

@ -73,12 +73,23 @@ function onTransitionEnd() {
@transitionend="onTransitionEnd" @transitionend="onTransitionEnd"
> >
<div <div
:class="{ paused: !renderSpinner }"
class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']" class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
></div> ></div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.paused {
&::before {
animation-play-state: paused !important;
}
&::after {
animation-play-state: paused !important;
}
}
.loader { .loader {
&::before { &::before {
animation: loader-shadow-ani 0.5s linear infinite; animation: loader-shadow-ani 0.5s linear infinite;