Question

我已经创建了这个很酷的滑动抽屉导航的分支：https://codepen.io/carl-victor-fontanos/pen/NQPLGW，它在从左向右滑动时效果很好。

我目前正在尝试启用从右向左滑动，但是我只能使其部分工作。这是我到目前为止所能获得的：https://codepen.io/carl-victor-fontanos/pen/gVbdYq-在这支笔中，您会注意到它现在从右向左打开，但是问题是滑动仍然是反向的，这不是我想要的。我修改了CSS，使位置显示在右侧而不是左侧，并且在JavaScript方面，我将translateX从负值更改为正值。

希望有人可以帮助我完成这项工作，因为我已经尝试解决了几个小时。

Answer 1

实际滑动方向的简单解决方法是在“移动”功能中设置x = -x

    function move(x, e) {
      x = -x;

我们可以有一个更干净的解决方案，但是可以。然后，我认为您需要更改意图计算，因为只需更改x = -x，您就需要缓慢滑动直到边缘真正关闭面板。希望这会有所帮助

（我只是意识到我只是检查了关闭而不是打开）。

Answer 2

我相信您尚未更改初始翻译位置

.drawer {
...
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
...
}

https://codepen.io/anon/pen/zgxmBM

Answer 3

您只需要将转换值设置为与边栏的宽度相等的硬编码

.drawer {
...
  -webkit-transform: translateX(320px) or 100%;
  -moz-transform: translateX(320px) or 100%;
  -ms-transform: translateX(320px) or 100%;
  -o-transform: translateX(320px) or 100%;
  transform: translateX(320px) or 100%;
...
}

从右向左滑动以打开抽屉

3 个答案: