javascript - touchend 事件，返回 touchstart 状态动画

Question

我目前正在使用 webkit 和触摸事件。

我可以让一个元素沿着触摸移动滑动，然后让它回到触摸端。

但是无论我尝试什么，它都会在没有动画的情况下恢复到原来的状态，所以它很丑。

var obj = document.getElementById('element');

obj.addEventListener('touchmove', function(event) {
  event.preventDefault();
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    obj.style.left = touch.pageX + 'px';
  }
}, false);

obj.addEventListener('touchend', function(event) {

  ???

}, false);

我已经尝试过 startnode、style、webkit-animation-name（在触摸事件之外工作）和其他一些奇怪的方式，但它仍然没有动画。

谢谢你的帮助。

Answer 1

您可以将元素设置为具有过渡，以便在设置位置时元素移动到该位置需要 X 时间。

.class {
    -webkit-transition: left ease 3s;
}

在拖动过程中，您需要将其设置为 0，以便它不会延迟地跟随您的手指。

例子：

var obj = document.getElementById('element');

obj.addEventListener('touchmove', function(event) {
  event.preventDefault();
  if (event.targetTouches.length == 1) {
    obj.style.webkitTransition = 'left ease 0s';
    var touch = event.targetTouches[0];
    obj.style.left = touch.pageX + 'px';
  }
}, false);

obj.addEventListener('touchend', function(event) {

  obj.style.webkitTransition = 'left ease 3s';
  //Set position here
}, false);