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

Question

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

Answer 1

当用户提交表单时，您似乎正在取消整个模态组件，从而终止该过程中的 AnimatePresence。尝试这样的事情：

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

动画存在应该包含安装/卸载组件的条件。