更改语言环境时的动画 - 成帧器运动

Question

在 Next.js 中，当我将区域设置 (i18n) 更改为另一个时，是否可能会有动画？我试过高阶组件但它不起作用。我的 HOC

        import { motion } from 'framer-motion'
    import { chakra, shouldForwardProp } from '@chakra-ui/react'
    
    const StyledDiv = chakra(motion.div, {
      shouldForwardProp: prop => {
        return shouldForwardProp(prop) || prop === 'transition'
      }
    })
    
    const Section = ({ children, delay = 0 }) => (
      <StyledDiv
        initial={{ y: 10, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.8, delay }}
        mb={6}
      >
        {children}
      </StyledDiv>
    )
    
    export default function WithAnimation(Component) {
      return props => (
        <Section>
          <Component {...props} />
        </Section>
      )

}

_app js

//(...)
import Layout from '../components/layouts/main'
import WithAnimation from '../components/with-animation'
function Website({ Component, pageProps, router }) {
  const { locale } = router
  const t = locale === 'en' ? en : pl
  return (
    <ChakraProvider theme={theme}>
      <Fonts />
      <Layout router={router}>
        <Component {...pageProps} key={router.route} />
      </Layout>
      <MessengerCustomerChat
        pageId="secretxxxxxxxxx"
        appId="secretxxxxxxxxxxxxxx"
        language={t.messengerChatLang}
        loggedInGreeting={t.loggedInGreetingLang}
        themeColor={t.themeColorLang}
      />
    </ChakraProvider>
  )
}

export default WithAnimation(Website)

我使用 HOC WithAnimation(Website)

在我的 Website 组件上渲染

//更新1： main.js（_app.js 中的布局组件）

import NavBar from '../navbar'
import { Box, Container } from '@chakra-ui/react'
import Footer from '../footer'

const Main = ({ children, router }) => {
  return (
    <Box as="main">
      <NavBar path={router.asPath} />
      <Container maxW="container.md" pt={14}>
        {children}
        <Footer />
      </Container>
    </Box>
  )
}

export default Main

我想制作动画

 <Container maxW="container.md" pt={14}>
        {children}
        <Footer />
      </Container>

每次更改语言环境 (i18n) 时

Answer 1

您有多种方法可以做到这一点，但针对您的情况，您可以添加一个 AnimatePresence 并使用 router.locale 作为动画的触发器，如下所示：

import { motion, AnimatePresence } from 'framer-motion'
import { useRouter } from 'next/router'
import { chakra, shouldForwardProp } from '@chakra-ui/react'

const StyledDiv = chakra(motion.div, {
  shouldForwardProp: prop => {
    return shouldForwardProp(prop) || prop === 'transition'
  }
})

const Section = ({ children, delay = 0 }) => {
  const router = useRouter()
  return (
    <AnimatePresence exitBeforeEnter>
      <StyledDiv
      // pass the router.locale as the key, so every time it change it will trigger the animation
        key={router.locale}
        initial={{ y: 10, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.8, delay }}
        mb={6}
      >
        {children}
      </StyledDiv>
    </AnimatePresence>
  )
}

export default function WithAnimation(Component) {
  return props => (
    <Section>
      <Component {...props} />
    </Section>
  )
}

我不知道你是否已经这样做了，但在你的 next.config.js 中你应该添加语言环境：

// next.config.js
module.exports = {
  i18n: {
    locales: ["en-US", "fr", "nl-NL"],
    defaultLocale: "en-US",
    domains: [
      {
        domain: "example.com",
        defaultLocale: "en-US"
      },
      {
        domain: "example.nl",
        defaultLocale: "nl-NL"
      },
      {
        domain: "example.fr",
        defaultLocale: "fr",
        http: true
      }
    ]
  }
};

这只是我从 nextJs docs 那里得到的一个例子，但它应该可以工作。

如果您想了解有关 animatePresence 的更多信息，请查看 framer-motion docs。

我还留下了一个使用 codesandbox 的基本示例，check it out。

更改语言环境时的动画 - 成帧器运动

Animation when I change a locale - framer motion

reactjs

next.js

framer-motion