Touchend事件，回到touchstart状态动画

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，风格，WebKit的动画名称（即外触摸事件的作品）和其他一些weirds方式，但它仍然是动画的地狱。

感谢您的帮助。

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