[英]Layout shift on exit animation with Framer Motion and NextJS
我有一个我正在做的网站,其中一个页面在访问另一个页面时会闪烁 Layout Shift。 没有其他页面这样做,我不知道如何弄清楚。 如果有人有一些 Framer Motion 见解,他们想与我分享如何解决此问题,我将不胜感激。 我还发现,当它在开发中时不会发生,但是当我部署到生产环境时,它会发生。
页面: https://krista-doubleday--preview-apq5vrih.web.app/contact
这是该页面的代码:
import { Button, Grid, Typography, useMediaQuery } from '@material-ui/core'
import Image from '../components/Image'
import styles from '../styles/Contact.module.scss'
export default function Contact(props) {
const isMobile = useMediaQuery('(max-width: 1279px)')
return (
<Grid container className={ styles.bg } direction="column" justifyContent={isMobile ? 'start' : 'center'} alignItems="center" style={{minHeight: '100vh'}}>
<Grid container direction="row" flexWrap="wrap-reverse" justifyContent="center" alignItems="center" style={{ maxWidth: '2000px' }}>
<Grid item className={styles.contact} style={{ margin: isMobile ? '-10% 0px 0px 0px' : '0px -10% 0px 0px', padding: '2em', zIndex: 2 }}>
<Grid item xs={12} lg={6} justifyContent="center" className={styles[`contact-card`]}>
<Typography variant="h3" style={{marginBottom: '1rem'}}>Contact Me</Typography>
<Typography>Krista Doubleday, M.COUN, LCPC, NCC</Typography>
<Typography><b>Call/Text:</b> {<a href="tel:2083665616">208.366.5616</a>}</Typography>
<Typography><b>Fax:</b> 208.362.7083</Typography>
<Typography><b>Email:</b> {<a href="mailto:info@kristadoubleday.com" target="_blank">info@kristadoubleday.com</a>}</Typography>
<br />
<Typography><b>Address:</b></Typography>
<Typography>{<a href="https://goo.gl/maps/jVcih9ihFSB2weAv7" target="_blank">3709 N Locust Grove Rd, Suite 100 <br />Meridian, ID 83646</a>}</Typography>
<Grid item style={{ marginTop: '1rem' }}>
<Button variant="contained" color="lavender"><a href="https://krista-doubleday.clientsecure.me/" target="_blank" style={{textDecoration: 'none'}}><Typography variant="button" style={{color: '#ffffff'}}>Client Portal</Typography></a></Button>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} lg={6}>
<Image divClasses={styles[`inner-frame`]} src="/images/contact.jpg" style={{ minHeight: '600px', maxWidth: '100%', objectFit: 'cover' }} />
</Grid>
</Grid>
<Typography variant="subtitle1" style={{ marginTop: '1rem', textAlign: 'center' }}>Can you see yourself here? Call, text, or email me to set up your free 15 minute phone consultation. I look forward to hearing from you.</Typography>
</Grid>
)
}
这是 CSS:
.bg {
position: relative;
z-index: 1;
&::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("/images/email-pattern.png");
background-attachment: fixed;
background-size: 600px;
opacity: 0.65;
z-index: -1;
}
}
.contact {
position: relative;
border-right: 2rem solid #c0debb;
background-color: #ffffff;
white-space: nowrap;
max-width: 100%;
& p {
font-size: calc(0.6vmin + 10px);
}
}
.contact-card {
width: 600px;
max-width: 80vw;
}
.inner-frame {
position: relative;
& ::before {
content: "";
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
border: 2px solid #ffffff;
}
& img {
display: block;
width: 100%;
height: auto;
}
}
如果您单击栏中的任何链接,您会看到两个 div 失去了定位。 任何帮助表示赞赏!
我设法将问题追溯到 CSS 模块。 基本上,当页面更改发生时,所有 CSS 模块都会立即使用新页面的 CSS 模块被销毁。 因此,所有相关的样式都被破坏了,因为 Motion 只是在制作动画时“保存”了组件 state - 而不是样式表。
我刚刚使用makeStyles()
切换到 JSS,现在问题已经消失了。 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.