reactjs - 退出动画在下一个 js 成帧器 Action 中不起作用？

Question

我将 next js 用于我的应用程序和 framer 运动用于我的动画。我可以设置一个介绍动画，但所有退出动画都不起作用..

我已将代码封装在动画存在下，但它什么也没做。

我在这里错过了什么？

下面是我的示例代码:

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

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