时间戳

首页 > 解决方案 > 为什么初始项目没有使用 useTransition 过渡出来

javascript - 为什么初始项目没有使用 useTransition 过渡出来

问题描述

我正在使用 react-spring 的 useTransition 在页面之间进行转换，如下所示：

    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>
    );
...

初始页面使用“初始”样式正确呈现，但未使用“离开”样式过渡。导航到其他页面后，它们都会按应有的方式进行转换，甚至是返回时的初始页面。

那么，如何让初始页面像其他页面一样过渡出来？

编辑：添加了展示问题的代码框。

标签： javascriptreactjsreact-hooksreact-spring

解决方案

如果我正确理解你的意图，你可以transform在初始对象中设置从-0%： 

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

推荐阅读