如何将 useTransition 侧边栏定位到最右侧

Question

我正在尝试将此侧边栏放置在与当前正在执行的操作相反的位置。我希望侧边栏从右侧进入并始终保持正确。没有离开。

这是供您复制的沙盒链接 - https://codesandbox.io/s/react-spring-sidebar-transition-forked-igmgr。

谢谢。

Answer 1

首先将侧边栏放在右侧。

.sidebar {
  position: absolute;
  right:0;
}

将变换更改为正 x 方向

from: {
  transform: "translateX(100%)"
},
enter: {
  transform: `translateX(0)`
},
leave: {
  transform: "translateY(100%)"
},