nextjs + framer-motion：“退出”动画不适用于孩子答案

【问题标题】：nextjs + framer-motion: "exit" animation not working on childnextjs + framer-motion：“退出”动画不适用于孩子
【发布时间】：2023-01-16 06:38:51
【问题描述】：

我对 framer-motion 和“exit”-animation 有疑问。在 Internet 上进行一些搜索后，我发现 <AnimatePresence> 的孩子需要一个 key 属性并且应该是直接孩子。

我的简化结构：

// manager of the sites
const SiteManager = () => {

 return (
   <AnimatePresence mode="wait" ...>
     {
        {
           0: <Page1 />
           1: <Page2 />
           ...
        }[page] 
     }
   </AnimatePresence>
  )
}

// this component should be animated with the slide effect
const Fade = ({ children }) => {

 return (
   <motion.div key={page} ...>
     { children }
   </motino.div>
  )
}

// a page has content and a footer -> footer shouldnt be animated, thats the reason why i had to seperate it to the <Fade /> Component
const Page1 = () => {

 const [value, setValue] = useState("")

 return (
    <>
      <Fade>
       <input value={value} onChange={e => setValue(e.target.value)} />
      </Fade>

      <Footer value={value} ... />
    </>
  )
}

也许codesandbox有点帮助： Codesandbox

我给了 <motion.div> 一把钥匙，但它没有改变任何东西。

【问题讨论】：

标签： next.js framer-motion

【解决方案1】：

您是否修复了 motino.div 拼写错误？

【讨论】：