1

我对AnimatePresence用于页面转换的 , 有疑问。一切正常，除了当我加载一些页面（不是所有页面）时，页面的内容不显示，即使正确推送了 url，我必须手动重新加载页面才能看到内容。这是我的_app.js：

import '../assets/css/style.css';
import { AnimatePresence, motion } from 'framer-motion';

const pageVariants = {
    pageInitial: {
        backgroundColor: 'black',
        opacity: 0
    },
    pageAnimate: {
        backgroundColor: 'transparent',
        opacity: 1
    },
    pageExit: {
        backgroundColor: 'black',
        opacity: 0
    }
}

const pageMotionProps = {
    initial: 'pageInitial',
    animate: 'pageAnimate',
    exit: 'pageExit',
    variants: pageVariants
}

function handleExitComplete() {
    if (typeof window !== 'undefined') {
      window.scrollTo({ top: 0 })
    }
  }

const App = ({ Component, pageProps, router }) => {
    return (
        <AnimatePresence exitBeforeEnter onExitComplete={handleExitComplete}>
            <motion.div key={router.route} {...pageMotionProps}>
                <Component {...pageProps}/>
            </motion.div>
        </AnimatePresence>
    )

export default App

这里是使用动态路由和静态方法创建的页面：

import ReactMarkdown from 'react-markdown'
import { getArticles, getArticle, getCategories } from '../../lib/api'
import Layout from '../../components/layout/layout'

const Article = ({ article, categories }) => {
  const imageUrl = article.image.url.startsWith('/')
    ? process.env.API_URL + article.image.url
    : article.image.url
  return (

    <Layout categories={categories}>
     
      <h1>{article.title}</h1>
        <div>
          <ReactMarkdown source={article.content} />
        </div>
      
    </Layout>
  )
}

export async function getStaticPaths() {
  const articles = (await getArticles()) || []
  return {
    paths: articles.map((article) => ({
      params: {
        id: article.id,
      },
    })),
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const article = (await getArticle(params.id)) || []
  const categories = (await getCategories()) || []
  return {
    props: { article, categories },
    unstable_revalidate: 1,
  }
}

export default Article

注意：有些页面可以正常工作，有些页面需要重新加载才能显示内容，加载时动画启动没有问题。我不知道这是否重要，但我正在使用 GraphQL 获取数据

4

0 回答 0