Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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,
left: 0,
pointerEvents: 'none',
width: `${indicator.progress.value}%`,
width: 'auto',
height: `${props.height}px`,
opacity: indicator.isLoading.value ? 1 : 0,
background: props.color || undefined,
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
}
}, slots)