chore: use translate3d for performance optimization (#38747)

* chore: use translate3d for performance optimization

* test: fix

* revert
This commit is contained in:
lijianan 2022-11-24 10:08:08 +08:00 committed by GitHub
parent c2f75a2ba3
commit 5148b01183
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 8 deletions

View File

@ -35,7 +35,7 @@ const useStyle = () => {
} }
.intro { .intro {
transform: translateY(0); transform: translate3d(0, 0, 0);
h4${token.antCls}-typography { h4${token.antCls}-typography {
padding-bottom: 0; padding-bottom: 0;
@ -48,7 +48,7 @@ const useStyle = () => {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
transform: translateY(100%); transform: translate3d(0, 100%, 0);
transition: all ${token.motionDurationSlow}; transition: all ${token.motionDurationSlow};
${token.antCls}-typography { ${token.antCls}-typography {
@ -62,7 +62,7 @@ const useStyle = () => {
h4${token.antCls}-typography { h4${token.antCls}-typography {
position: absolute; position: absolute;
padding: 0 ${token.paddingMD}px ${token.paddingMD}px; padding: 0 ${token.paddingMD}px ${token.paddingMD}px;
transform: translateY(-100%); transform: translate3d(0, -100%, 0);
} }
div${token.antCls}-typography { div${token.antCls}-typography {

View File

@ -164,7 +164,7 @@ const useStyle = () => {
logoImgPureColor: css` logoImgPureColor: css`
img { img {
transform: translateX(-30px); transform: translate3d(-30px, 0, 0);
} }
`, `,
@ -512,7 +512,7 @@ export default function Theme() {
style={{ style={{
...posStyle, ...posStyle,
left: '50%', left: '50%',
transform: 'translateX(-900px)', transform: 'translate3d(-900px, 0, 0)',
top: -100, top: -100,
height: 500, height: 500,
}} }}
@ -523,7 +523,7 @@ export default function Theme() {
style={{ style={{
...posStyle, ...posStyle,
right: '50%', right: '50%',
transform: 'translateX(750px)', transform: 'translate3d(750px, 0, 0)',
bottom: -100, bottom: -100,
height: 287, height: 287,
}} }}

View File

@ -21,7 +21,7 @@ const useStyle = () => {
padding: 0 40px; padding: 0 40px;
background: #fff; background: #fff;
box-shadow: ${boxShadowSecondary}; box-shadow: ${boxShadowSecondary};
transform: translateY(-100%); transform: translate3d(0, -100%, 0);
opacity: 0; opacity: 0;
transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s;
@ -43,7 +43,7 @@ const useStyle = () => {
} }
`, `,
affixTabsFixed: css` affixTabsFixed: css`
transform: translateY(0); transform: translate3d(0, 0, 0);
opacity: 1; opacity: 1;
`, `,
}; };