Javascript 为什么不使用UseTransformation转换初始项

我使用react-spring的UseTransformation在页面之间进行如下转换：

    const context = useContext(AppContext);
    const items = [context.page];
    const transitions = useTransition(items, item => item.label, {
        initial: {
            transform: 'translate3d(0,0,0)',
            opacity: 0.2,
        },
        from: {
            transform: 'translate3d(100%,0,0)',
            opacity: 1,
        },
        enter: { transform: 'translate3d(0,0,0)', opacity: 1 },
        leave: { transform: 'translate3d(-100%,0,0)', opacity: 1 },
    });

    return (
        <div className="app-content">
            {transitions.map(({ item, props, key }) => (
                <animated.div key={key} style={props}>
                    {renderPage(item.label)}
                </animated.div>
             )}
        </div>
    );
...

const context=useContext（AppContext）；
const items=[context.page]；
const transitions=useTransition（items，item=>item.label{
首字母：{
转换：“translate3d（0,0,0）”，
不透明度：0.2，
},
发件人：{
转换：“translate3d（100%，0,0）”，
不透明度：1，
},
输入：{transform:'translate3d（0,0,0）”，不透明度：1}，
左：{transform:'translate3d（-100%，0,0）”，不透明度：1}，
});
返回(
{transitions.map（{item，props，key}）=>(
显示问题。
如果我正确理解您的意图，您可以将初始对象中的
变换设置为从
-0%
开始：

initial: {
  transform: "translate3d(-0%,0,0)",
  opacity: 0.2
},

如果我正确理解了您的意图，您可以将初始对象中的
变换设置为从
-0%
开始：

initial: {
  transform: "translate3d(-0%,0,0)",
  opacity: 0.2
},

您是否可以创建具有更新描述的问题的代码沙盒？您是否可以创建具有更新描述的问题的代码沙盒