如何根据 Hammer.js pan 设置 translateX 的样式？答案

【问题标题】：How to style an translateX depending on Hammer.js pan?如何根据 Hammer.js pan 设置 translateX 的样式？
【发布时间】：2017-01-12 08:58:18
【问题描述】：

当用户使用 Hammer.js 平移元素时，我想 translateX() 一个元素。当用户向左拖动内容时，我想翻译左侧的内容。对的也一样。

当前代码：

var manager = new Hammer.Manager(elem);

var panner = new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 0 });

manager.add(panner);

manager.on("panleft", function(e) {
    elem.style.transform = "translateX(" + (e.distance * -1) + "px)";
});

manager.on("panright", function(e) {
    elem.style.transform = "translateX(" + e.distance + "px)";
});

它可以工作，除非用户向左平移然后返回向右，它会出现故障并变为负数。我怎样才能让它发挥作用？

【问题讨论】：

标签： javascript css hammer.js gestures

【解决方案1】：

我通过绑定panmove 事件并使用e.deltaX 属性解决了这个问题：

manager.on("panmove", function(e) {
   elem.style.transform = "translateX(" + e.deltaX + "px)";
});

【讨论】：