Reactjs 在帧运动中为父对象之前的子对象设置动画

我正在尝试制作一个下拉菜单，因此当我单击汉堡包菜单时，动画发生在父div从

height:0

到

height:auto

，而

链接只从
opacity 0变为1
感觉它们是位置
绝对
，但它们是相对的
，我尝试了
transition:{when:“afterChildren”}
但它并没有影响任何东西，所以当孩子的动画完成时，我如何使家长动画化

我希望这种动画时，点击菜单

我的代码：

 <AnimateSharedLayout>
        <AnimatePresence exitBeforeEnter>
          {isMobileMenuOpen && (
            <motion.div
              layout
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{
                opacity: 0,
                height: 0,
                transition: { when: "afterChildren" },
              }}
              transition={{ duration: 0.5, staggerChildren: 0.3 }}
              className={styles.mobileMenu}
            >
              <Link
                onClick={() => setMobileMenuOpen(!isMobileMenuOpen)}
                className={
                  location.pathname === "/works" ? styles.activeLink : ""
                }
                to='/works'
                data-content='Works'
              >
                <AnimatePresence>
                  <motion.span
                    layout
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                  >
                    Works
                  </motion.span>
                </AnimatePresence>
              </Link>
              <Link
                onClick={() => setMobileMenuOpen(!isMobileMenuOpen)}
                to='/blog'
                className={
                  location.pathname === "/blog" ? styles.activeLink : ""
                }
                data-content='Blog'
              >
                <AnimatePresence>
                  <motion.span
                    layout
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                  >
                    Blog
                  </motion.span>
                </AnimatePresence>
              </Link>
              <Link
                onClick={() => setMobileMenuOpen(!isMobileMenuOpen)}
                to='/contact'
                className={
                  location.pathname === "/contact" ? styles.activeLink : ""
                }
                data-content='Contact'
              >
                <AnimatePresence>
                  <motion.span
                    layout
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                  >
                    Contact
                  </motion.span>
                </AnimatePresence>
              </Link>
            </motion.div>
          )}
        </AnimatePresence>
      </AnimateSharedLayout>


{isMobileMenuOpen&&(
setMobileMenuOpen（！isMobileMenuOpen）}
类名={
location.pathname==“/works”？style.activeLink:”
}
to='/works'
数据内容='Works'
>
作品
setMobileMenuOpen（！isMobileMenuOpen）}
to='/blog'
类名={
location.pathname==“/blog”？style.activeLink:”
}
数据内容='Blog'
>
博客
setMobileMenuOpen（！isMobileMenuOpen）}
to='/contact'
类名={
location.pathname==“/contact”？style.activeLink:”
}
数据内容class='Contact'
>
接触
)}