<；transition：transition；duration；}；div className={styles[‘auth-icon-tray’]}><

我在我的应用程序中使用next js，在动画中使用framer motion。我可以设置一个介绍动画，但退出动画都不起作用。

我已经将代码包装在动画状态下，但它什么也做不了。

这里我漏掉了什么？

下面是我的示例代码：

​

<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 16.1728 17.0951 15.3915 16.6502 14.9467L11.6914 9.98789L16.6502 5.03998C17.0951 4.58425 17.1059 3.803 16.6393 3.34727C16.1728 2.89154 15.3915 2.88069 14.9466 3.33643L9.98784 8.28434L5.03993 3.33643C4.59506 2.89154 3.80295 2.88069 3.34722 3.34727C2.88064 3.803 2.89149 4.59509 3.33637 5.02914L8.29515 9.98789L3.33637 14.9467Z" fill="black"/>
                        </svg>
                        
                    </div>
                </div>
                <label className={styles['auth-modal-title']} >Sign in</label>
                <label className={styles['auth-modal-subtitle']} >Get access to all features</label>
                <input 
                    type="text"
                    name="email"
                    autoFocus
                    autoComplete="username email"
                    placeholder="Enter your email"
                    className={errorCondition ? styles['auth-modal-input-error'] :styles['auth-modal-input']}
                    onChange={(e)=>{setErrorCondition(false) ;setEmailHandler(e.target.value)}}
                    defaultValue={emailId}
                    onKeyDown={(e)=>{handleKeypress(e)}}
                />
                <label className={styles['auth-modal-error-message']} >{errorMessage}</label>
                <div className={styles['auth-modal-button-holder']}>
                    {( emailHandler == '')?(<button className={styles['auth-modal-button-faded']}>Continue</button>): emailAuthLoad ? <div className={styles['post-cell-loader']} /> : <button className={styles['auth-modal-button']} onClick={()=>{submitEmail()}}  >Continue</button>}
                    
                </div> 
            </motion.form>
        </AnimatePresence>

​

当用户提交表单时，您似乎是在取消省略整个模态组件，并在此过程中终止AnimatePresence。尝试如下所示：

<AnimatePresence>
  { showModal && 
    <motion.form {...props}>
      //form content
    </motion.form>
</AnimatePresence>

动画呈现应封装挂载/卸载组件的条件。

以上是真正的电脑专家为你收集整理的退出动画在下一个js帧器运动中不起作用？的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得真正的电脑专家网站内容还不错，欢迎将真正的电脑专家推荐给好友。