我试图在下一个 js 中为我的组件设置退出动画,但我只能给出初始动画。
有人可以告诉我这里出了什么问题吗?
这是我的示例代码:
<AnimatePresence >
<motion.div key="modalBackground" className={styles['auth-modal-layout']} key="modalBackground" initial="hidden" animate="visible" variants={
{
hidden:{
opacity:0
},
visible:{
opacity:1,
transition:{
duration:.4,
}
},
}
} >
<motion.div key="modalForm" className={styles['auth-modal-form']} initial="hidden" exit="pageExit" animate="visible" exit="hidden" variants={{
hidden:{
translateY:100,
opacity:0
},
visible:{
translateY:0,
opacity:1,
transition:{
duration:.4
}
},
pageExit:{
opacity:0,
transition:{
when:"afterChildren",
duration:.4
}
}
}} >
{modal()}
</motion.div>
</motion.div>
</AnimatePresence> Run Code Online (Sandbox Code Playgroud)
我一直在尝试将我的应用程序部署到此处的数字海洋应用程序中,但在过去的几天里,该应用程序遇到了致命错误:
[2022-06-13 07:11:31] npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
[2022-06-13 07:11:31] npm ERR!
[2022-06-13 07:11:31] npm ERR! Missing: @babel/core@7.18.5 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @ampproject/remapping@2.2.0 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/generator@7.18.2 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/helper-compilation-targets@7.18.2 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/helper-module-transforms@7.18.0 from lock file …Run Code Online (Sandbox Code Playgroud)我在我的应用程序中使用 next js,在我的动画中使用成帧器运动。我可以设置介绍动画,但退出动画根本不起作用。
我已将代码包装在动画效果下,但它没有执行任何操作。
我在这里缺少什么?
下面是我的示例代码:
<AnimatePresence>
<motion.form onSubmit={e => { e.preventDefault(); }} className={styles['auth-modal-form']} initial="hidden" exit="formExit" animate="visible" variants={
{
hidden:{
opacity:0,
translateX:-25
},
visible:{
opacity:1,
translateX:0,
transition:{
duration:.2
}
},
formExit:{
translateX:25,
transition:{
duration:1
}
}
}
} >
<div className={styles['auth-icon-tray']}>
<div className={styles['icon-container']} onClick={()=>{
setEmailId('');
dispatch(setModalClose())
document.body.style.overflow = 'unset';
}} >
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33637 14.9467C2.89149 15.3807 2.88064 16.1836 3.34722 16.6394C3.8138 17.0951 4.59506 17.0842 5.03993 16.6502L9.98784 11.6914L14.9466 16.6394C15.3915 17.0951 16.1728 17.0951 16.6393 16.6285C17.0951 …Run Code Online (Sandbox Code Playgroud)我在我的应用程序中使用 Next.js,并且在路由到应用程序的上一个路由时遇到一些问题。我知道back()类似于 的路由器功能window.history.back(),我想在单击 a 时返回到路由Link,如果上一个链接不是来自我的应用程序或者是null,我想转到主页作为默认值。
我使用了类似react-router-last-location我的 React 应用程序的库,但我想看看是否有更好的方法可以通过next/router.
这是我的示例代码:
<div className={styles['icon-container']}>
<Link href="/"><a>
<img src="icon.svg"></img>
</a></Link>
</div>
Run Code Online (Sandbox Code Playgroud)
如果我在 href 输入中使用 router.back() ,页面甚至在加载之前就会自动返回,我该如何解决这个问题?