Блог

У меня есть контейнер с анимацией монтирования и when установлен на beforeChildren . У ребенка также есть анимация монтирования.

Таким образом, анимация монтирования ребенка начинает воспроизводиться после завершения родительской анимации. Однако дочерний компонент монтируется в дереве компонентов одновременно с родительским.

Это проблема, потому что я хочу запустить некоторый код точно в тот момент, когда начнется анимация ребенка (в данном случае воспроизведение звука).

Пример кода:

 // 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>
  );
}
 

Помимо буквального написания моей собственной библиотеки оркестровки, как мне запустить некоторый код в момент запуска анимации ребенка?