Commite6ed039

committed

refactor(animation): add will-change to make transform fast

1 parentf690d8b commite6ed039Copy full SHA for e6ed039

File tree

-4

lines changed

src/containers
- layout/GlobalLayout/styles
  - index.ts
- tool/Drawer/styles
  - index.ts

-4

lines changed

Lines changed: 6 additions & 4 deletions

Original file line number	Diff line number	Diff line change
@@ -11,13 +11,15 @@ export const Wrapper = styled.div`
`11`	`11`
`12`	`12`	`&:before {`
`13`	`13`	`content: '';`
`14`		`- position: absolute;`
	`14`	`+ position: fixed;`
	`15`	`+ width: 100%;`
	`16`	`+ height: 100%;`
`15`	`17`	`left: 0;`
`16`	`18`	`top: 0;`
`17`	`19`	`background-image: url(${ASSETS_ENDPOINT}/space-background.svg);`
`18`		`- background-attachment: fixed;`
`19`		`-width: 100%;`
`20`		`-height: 100%;`
	`20`	`+/background-attachment: fixed; /`
	`21`	`+/* see https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/ */`
	`22`	`+will-change: transform;`
`21`	`23`	`opacity: 0.6;`
`22`	`24`	`}`
`23`	`25`	`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -54,6 +54,7 @@ export const DrawerWrapper = styled.div.attrs(`
`54`	`54`	`color:${theme('drawer.font')};`
`55`	`55`	`box-sizing: border-box;`
`56`	`56`	`transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;`
	`57`	`+ will-change: transform;`
`57`	`58`	`font-family: Roboto, sans-serif;`
`58`	`59`	`-webkit-tap-highlight-color: rgba(0, 0, 0, 0);`
`59`	`60`	`border-radius: 0px;`

Comments

(0)