Webkit transitionEnd regroupement d'événements

Question

J'ai un élément HTML auquel j'ai joint un événement webkitTransitionEnd.

function transEnd(event) { 
    alert("Finished transition!"); 

} 

var node = document.getElementById('node'); 
node.addEventListener('webkitTransitionEnd', transEnd, false); 

Ensuite, je passe à changer de CSS gauche et les propriétés de premier plan comme:

node.style.left = '400px'; 
node.style.top = '400px'; 

Cela provoque la DIV de se déplacer en douceur vers la nouvelle position. Mais, quand il se termine, 2 boîtes d'alerte apparaissent, alors que je n'en attendais qu'un à la fin de l'animation. Lorsque j'ai modifié uniquement la propriété CSS left, j'obtiens une seule case d'alerte. Cela signifie que les deux modifications apportées au style sont enregistrées comme deux événements distincts. Je veux les spécifier comme un événement, comment puis-je faire cela?

Je ne peux pas utiliser une classe CSS pour appliquer les deux styles en même temps car les propriétés CSS gauche et supérieure sont des variables que je ne connaîtrai que lors de l'exécution.

Answer 1

Si vous utilisez Webkit, je suppose que vous mobilisez une application Web pour un accès multi-plateforme.

Si oui, avez-vous envisagé d'extraire l'accès multiplateforme à la couche de présentation de l'application web? Web12 ne fournit pas l'aspect et la convivialité natifs sur les appareils mobiles, mais c'est là qu'une nouvelle technologie peut aider.

Answer 2

Vérifiez l'événement propertyName:

function transEnd(event) { 
    if (event.propertyName === "left") { 
     alert("Finished transition!"); 
    } 
} 

var node = document.getElementById('node'); 
node.addEventListener('webkitTransitionEnd', transEnd, false); 

De cette façon, il ne fera que le feu lorsque la propriété « gauche » est terminée. Cela fonctionnerait probablement mieux si les deux propriétés ont la même durée et le même délai. En outre, cela fonctionnera si vous changez seulement "gauche", ou les deux, mais pas si vous changez seulement "top".

Sinon, vous pouvez utiliser une supercherie timer:

var transEnd = function anon(event) { 
    if (!anon.delay) { 
     anon.delay = true; 

     clearTimeout(anon.timer); 
     anon.timer = setTimeout(function() { 
      anon.delay = false; 
     }, 100); 

     alert("Finished transition!"); 
    } 
}; 

var node = document.getElementById('node'); 
node.addEventListener('webkitTransitionEnd', transEnd, false); 

Cela devrait faire en sorte que votre code fonctionnera au maximum 1 fois tous les 100ms. Vous pouvez modifier le délai setTimeout en fonction de vos besoins.

Answer 3

supprimez l'événement:

var transEnd = function(event) { 
    event.target.removeEventListener("webkitTransitionEnd",transEnd); 
}; 

il sera le feu pour la première propriété et non pour les autres.

Answer 4

de mon point de vue, le comportement attendu du code serait de

• déclenche une alerte que lorsque la dernière transition est terminée
• transitions de support sur une propriété
• support 1, 2, beaucoup de transitions de manière transparente

Dernièrement, j'ai travaillé sur quelque chose de similaire pour un gestionnaire de transition de page piloté par les timings CSS.

Telle est l'idée

// Returs the computed value of a CSS property on a DOM element 
// el: DOM element 
// styleName: CSS property name 
function getStyleValue(el, styleName) { 
    // Not cross browser! 
    return window.getComputedStyle(el, null).getPropertyValue(styleName);  
} 

// The DOM element 
var el = document.getElementById('el'); 

// Applies the transition 
el.className = 'transition'; 

// Retrieves the number of transitions applied to the element 
var transitionProperties = getStyleValue(el, '-webkit-transition-property'); 
var transitionCount = transitionProperties.split(',').length; 

// Listener for the transitionEnd event 
function eventListener(e) { 
    if (--transitionCount === 0) { 
     alert('Transition ended!'); 
     el.removeEventListener('webkitTransitionEnd', eventListener); 
    } 
} 

el.addEventListener('webkitTransitionEnd', eventListener, false); 

Vous pouvez tester ici this implementation ou (plus facile) jQuery version, à la fois travailler sur Webkit seulement

Answer 5

Si vous préférez dans JQuery, essayez ceci. Notez qu'il existe un paramètre d'événement pour stocker l'objet événement et l'utiliser dans la fonction correspondante.

$("#divId").bind('oTransitionEnd transitionEnd webkitTransitionEnd', event, function() { 
    alert(event.propertyName) 
});