如何根据状态变化进行反应姿势转换

Question

我只是在用React Pose进行了几天的实验，尽管我很喜欢它，但是我却在为过渡而苦苦挣扎。

...
    let value = (step.current_step * 100);
    let gutter = value === 0 ? 0 : value === 100 ? 16 : 32;

    const Stepper = posed.div({
        0: {
            x: `calc(-${value}vw - ${gutter}px)`,
            transition: {
                duration: 5000
            }
        },
        1: {
            x: `calc(-${value}vw - ${gutter}px)`,
            transition: {
                duration: 5000
            }
        },
        2: {
            x: `calc(-${value}vw - ${gutter}px)`,
            transition: {
                duration: 5000
            }
        }
    })

    return(
        <SliderContainer>
            <Stepper pose={step.current_step}
                className="stepper">
                <CardOne/>
                <CardTwo/>
                <CardThree/>
            </Stepper>
        </SliderContainer>
    )
}

考虑上面的代码。我有一个<SliderContainer/>，其中充满了隐藏的内容，一个<Stepper/>，其中包含一行内容的flex显示。我想通过带有姿势的x属性移动<Stepper/>。我正在基于当前状态计算新位置（以及一些间距）。我在<Card/>组件上具有“下一步”和“后退”按钮，它们可以更改step.current_step。所有这些都在起作用，但不是在动画。没有5秒的持续时间。没有过渡。它只是跳到下一个位置而没有进行动画处理。我从文档中了解到，持续时间是唯一需要应用的道具。我不确定我缺少什么。