javascript - 动画存在在下一个 js 中仅适用于退出动画吗？

Question

这个问题在这里已经有了答案:





Exit animation not working in next js framer motion?

(1 个回答)


去年关闭。




我正在尝试在下一个 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> 

Answer 1

<AnimatePresence>需要包装有条件渲染的组件。它不可能在里面。
您需要移动 <AnimatePresence>标记到更高级别或将条件逻辑移动到组件中。你很可能会做前者，像这样:

<AnimatePresence>
    {modalIsVisible && <ModalComponent />}
</AnimatePresence>

(在本例中 ModalComponent 包含您在上面显示的代码)。
否则，您需要始终渲染组件并传入一个 Prop 以用于有条件地渲染子级。在您的情况下(模态窗口)，我认为这不是您想要的。