小编Aad*_*gam的帖子

动画存在在下一个 js 中无法仅用于退出动画吗?

我试图在下一个 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)

javascript css reactjs next.js framer-motion

6
推荐指数
1
解决办法
7259
查看次数

Digital Ocean 应用程序部署错误:运行 npm ci 时程序包和程序包锁不同步

我一直在尝试将我的应用程序部署到此处的数字海洋应用程序中,但在过去的几天里,该应用程序遇到了致命错误:

[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)

reactjs digital-ocean package.json next.js

5
推荐指数
1
解决办法
9054
查看次数

退出动画在下一个 js 帧器运动中不起作用?

我在我的应用程序中使用 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)

reactjs next.js framer-motion

3
推荐指数
1
解决办法
3423
查看次数

如何使用“next/router”返回 Next.js 中的上一页?

我在我的应用程序中使用 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() ,页面甚至在加载之前就会自动返回,我该如何解决这个问题?

reactjs next.js next-router

1
推荐指数
1
解决办法
2万
查看次数