jQuery Girl
  1. jQuery Girl
  3. Comment utiliser transitionend dans jQuery?
Intereting Posts
Utilisation de jQuery pour modifier la largeur de div de 50% à 70% en survol comment charger l’URL dans la balise div Problème avec jQuery dans IE8 avec Fancybox Scrollify – Obtenir la dernière section consultée Fuite de mémoire CKEditor sur setData () PHP – L’appel Ajax n’exécutera pas l’API sans wait / print_r Wicket ModalWindow position Plage de datepicker de l’interface utilisateur jQuery Appliquer un style personnalisé sur les ticks de Highchart JavaScript Uncaught ReferenceError: jQuery n’est pas défini; Uncaught ReferenceError: $ n’est pas défini Comment interpréter des chaînes dans textarea avec JavaScript / jQuery? jquery comment obtenir le contenu collé Authentification par formulaires jQuery avec ASP.NET MVC jQuery: essayer d’obtenir la valeur d’entrée se concentrer sur le champ requirejs dans les tabs de bootstrap

Comment utiliser transitionend dans jQuery?

Je dois détecter si une transition CSS est terminée avant de permettre à une fonction de se répéter, pour éviter de gâcher les marges.

Alors, comment j’ai quelque chose comme 

if (transitionend == true) { // do stuff } else { // do nothing }

Le code ci-dessous déclenchera l’événement transitionend pour le ou les éléments que vous avez dans la variable $ element. Il existe quatre noms d’événements différents, car ils couvrent toutes les incohérences entre les navigateurs. Remplacez le commentaire ‘// votre gestionnaire d’événements’ par le code que vous souhaitez exécuter lorsque l’événement est déclenché. 

 $element.on('transitionend webkitTransitionEnd oTransitionEnd', function () { // your event handler });

Je pense que ce lien pourrait vous être utile.

Un seul événement est déclenché à la fin des transitions. Dans Firefox, l’événement est transitionend, dans Opera, OTransitionEnd et dans WebKit, il s’agit de webkitTransitionEnd. 

 el.addEventListener("transitionend", updateTransition, true);

Utilisez les données jQuery pour attacher des données avec état à l’élément. Utilisez une valeur booléenne pour “bloquer” les événements et inverser la variable booléenne une fois la transition terminée. Utilisez le code de xram pour connecter simultanément tous les événements de transition entre navigateurs.

Donc pour votre exemple …

  1. onclick set this.data (‘transitioning’, true)
  2. lorsque la transition se déclenche, définissez this.data (‘transitioning’, false)
  3. n’effectuez pas d’animation si this.data (‘transitioning’) == true. ceci est capturé et vérifié dans votre événement click.

Vous pouvez créer une méthode qui gardera à l’esprit lorsque la fin de la transition a été appelée la dernière fois et ne déclenche donc le rappel qu’une seule fois. 

 function transitionEndsOnce($dom, callback) { var tick = Date.now(); $dom.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(e) { var diff = Date.now() - tick; tick = Date.now(); if (diff > 20) { // this number can be changed, but normally all the event sortinggger are done in the same time return callback && callback(e); } }); }

puis utilisez-le simplement de cette façon 

 transitionEndsOnce($('...'), function(e){ console.log('transition ends once'); });