在array.map中使用Framer的UseAnimation钩

Question

在过去的几天里，我一直在玩框架。目前，我正在尝试为一个3个图标组成的组动画。第一个动画是从底部淡入它们，每个图标都比以前更大。第二个动画是水平淡出它们。我已经设置了动画变体，例如以下代码：

const iconAnimationVariants = {
    fadeIn: i => ({
        opacity: [0, 1],
        y: [20, 0],
        transition: {
            delay: i * 0.1,
            duration: 0.6
        }
    }),
    slideRight: i => ({
            opacity: 0,
            x: 20,
            transition: {
                delay: 2 + (i * 0.1),
                duration: 1.6
            }
    })
}

接下来，我使用下面的代码将图标添加到我的应用程序中并为其添加动画。

const renderIcons = () =>
    icons?.map(({src, alt}, index) => (
        <motion.li
            initial='hidden'
            custom={index}
            animate='fadeIn'
            exit='slideRight'
            variants={iconAnimationVariants}
            className="intro-icon"
            key={index}>
            <img src={src} alt={alt} />
        </motion.li>
    ))

这起作用了，至少fadein变体工作的一部分。要有更多的控制，我想使用Framer的useAnimation挂钩。为此，我添加了以下内容：

const iconAnimation = useAnimation()

useEffect(() => {
    iconAnimation.start("fadeIn")
        .then(() => {
            iconAnimation.start("slideOut")
        });
}, [iconAnimation])

我还更改了为此提供图标的代码：

const renderIcons = () =>
    icons?.map(({src, alt}, index) => (
        <motion.li
            initial='hidden'
            custom={index}
            animate={iconAnimation}
            variants={iconAnimationVariants}
            className="intro-icon"
            key={index}>
            <img src={src} alt={alt} />
        </motion.li>
    ))

通过这些更改，图标根本不会动画。当我在array.map中使用时，似乎iconanimation被完全忽略。我也有一个类似的设置，用于简单的文本动画，其中正常工作。

有没有人可以解释这一点，或者也许我朝正确的方向指出？ 如果您需要其他信息，请让我知道。 提前致谢， 杰罗恩