Tengo un contenedor con una animación de montaje y when se establece en beforeChildren . El niño también tiene una animación de montaje.

Por lo tanto, la animación de montaje del niño comienza a reproducirse una vez que finaliza la animación principal. Sin embargo, el componente secundario se monta en el árbol de componentes al mismo tiempo que el principal.

Esto es un problema porque quiero ejecutar un código exactamente en el momento en que comienza la animación del niño (en este caso, reproducir un sonido).

Código de ejemplo:

 // parent.js import { motion } from 'framer-motion'; import Child from './child'; export default function Parent() { const variants = { initial: { opacity: 0, }, animate: { opacity: 1, transition: { duration: 1, when: 'beforeChildren' } } }; return ( <motion.div variants={variants} initial="initial" animate="animate" > <h1>Parent displayed!</h1> <Child/> </motion.div> ); }

 // child.js import { motion } from 'framer-motion'; export default function Child() { const variants = { initial: { opacity: 0, }, animate: { opacity: 1, transition: { duration: 1, } } }; return ( <motion.div variants={variants} > <h1>Child displayed!</h1> </motion.div> ); }

Además de escribir literalmente mi propia biblioteca de orquestación, ¿cómo ejecuto algún código en el momento en que comienza la animación del niño?