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