IT技术 - 退出动画在下一个 js 成帧器动作中不起作用？ - 吾爱随笔录

我正在为我的应用程序使用下一个 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>