使用 Framer Motion 和 NextJS 对退出动画进行布局转换

Question

我有一个我正在做的网站，其中一个页面在访问另一个页面时会闪烁 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;
  }
}

如果单击栏中的任何 link，您会看到两个 div 失去了定位。感谢您的帮助！

Answer 1

我设法将问题追溯到 CSS 模块。基本上，当页面更改发生时，所有 CSS 模块都会被销毁，立即使用新页面的 CSS 模块。因此，所有关联的样式都被破坏了，因为 Motion 只是 'saves' 动画时的组件状态 - 而不是样式表。

我已经使用 makeStyles() 切换到 JSS，现在问题消失了。 :)

使用 Framer Motion 和 NextJS 对退出动画进行布局转换

Layout shift on exit animation with Framer Motion and NextJS

reactjs

next.js

framer-motion