Touchend événement, retour à l'état tactile animé

Question

Je travaille actuellement avec des webkit et des événements tactiles.

Je peux obtenir un élément à glisser le long du mouvement tactile, et le récupérer sur la touche.

Mais peu importe ce que j'essaie, il revient à son état d'origine sans animation, donc c'est moche.

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

J'ai essayé startnode, le style, webkit-animation nom (qui fonctionne en dehors des événements tactiles) et d'autres moyens weirds, mais il est encore inanimé comme l'enfer.

Merci pour votre aide.

Answer 1

Vous pouvez définir un élément pour qu'il y ait une transition de sorte que lorsque vous définissez une position, l'élément aura besoin de X fois pour passer à cet emplacement.

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

Au cours de glisser, vous voulez le mettre à 0s afin qu'il suive votre doigt sans délai.

Exemple:

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