Javascript 从右向左滑动可打开抽屉

我创建了一个很酷的刷卡抽屉导航叉：从左向右刷卡时效果非常好

我目前正在尝试启用从右向左的刷卡，但我只能使其部分工作。到目前为止，我得到的是：——在这支笔中，你会注意到它现在从右向左打开，但问题是，刷卡仍然是反向的，这不是我想要的。我修改了CSS，使其位置显示在右边而不是左边，在Javascript端，我将

translateX

从负值改为正值

---

希望有人能帮我解决这个问题，因为我已经尝试了几个小时。

我相信你没有改变最初的翻译立场

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

---

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

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

---

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

您只需要将转换值硬编码为等于边栏宽度

.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%;
...
}

---

您好，谢谢您的回答，但它仍然在反向滑动。抽屉应该在从右向左滑动时显示，而不是相反。对不起，我想你说的问题是，第一次加载时，面板是从页面内部打开的，而不是从页面右侧的外部打开的。我正在调查刷卡问题。嘿，再次感谢你的回答。x=-x确实解决了刷卡方向的问题，但仍然无法打开抽屉工作。你还在做这个吗？今晚我会再看一次谢谢你的回答，不幸的是，这不起作用。在iOS上，从屏幕边缘滑动会导致浏览器返回/前进。

.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%;
...
}