Question

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

我可以在触摸移动时滑动一个元素，并将其恢复到touchend。

但无论我尝试什么，它都会恢复到没有动画的原始状态，所以它很难看。

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);

Touchend事件，回到touchstart状态动画

1 个答案: