Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 08:33:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf(nuxt): animate transform rather than width (#19073)

Browse Source
This commit is contained in:
Nathan Chase 2023-02-16 08:04:09 -05:00 committed by GitHub
parent 7d0ecb5a96
commit 681cfa83fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/nuxt/src/app/components/nuxt-loading-indicator.ts
View File

@ -42,12 +42,14 @@ export default defineComponent({
right: 0, right: 0,
left: 0, left: 0,
pointerEvents: 'none', pointerEvents: 'none',
width: `${indicator.progress.value}%`, width: 'auto',
height: `${props.height}px`, height: `${props.height}px`,
opacity: indicator.isLoading.value ? 1 : 0, opacity: indicator.isLoading.value ? 1 : 0,
background: props.color || undefined, background: props.color || undefined,
backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`, backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
transition: 'width 0.1s, height 0.4s, opacity 0.4s', transform: `scaleX(${indicator.progress.value}%)`,
transformOrigin: 'left',
transition: 'transform 0.1s, height 0.4s, opacity 0.4s',
zIndex: 999999 zIndex: 999999
} }
}, slots) }, slots)