当帧动画开始时运行函数

2022-01-30 15:02:05 标签 javascriptreactjsanimationframer-motion

我有一个装载动画的容器,当设置为beforeChildren时。该子对象也有一个mount动画。

因此,一旦父动画结束,子动画就开始播放。然而,子组件与父组件同时被挂载到组件树中。

这是一个问题,因为我想在孩子的动画开始的那一刻运行一些代码(在本例中播放一个声音)。

示例代码:

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

除了字面上写我自己的编制库,我如何运行一些代码的时刻,孩子的动画开始?

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码