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

View File

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

View File

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