1

私は現在、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（タッチイベントの外部で機能する）などの奇妙な方法を試しましたが、それでも地獄のようにアニメーション化されていません。

ご協力いただきありがとうございます。

4

1 に答える 1

3

要素にトランジションを設定して、位置を設定したときに要素がその場所に移動するのに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);
于 2012-10-17T17:14:16.023 に答える