Necesito el elemento para hacer la transición (con una clase agregada), luego restaurar al completar dicha transición (eliminando la clase). Esto funciona, pero solo en el último elemento de la colección (no importa cuántos haya). ¿Cómo puedo hacer que TransitionEnd se active en cada elemento, en lugar de solo en el último?
He probado varios tiempos de espera, etc. en lugar de .on('webkitTransitionEnd... nada ha funcionado hasta ahora.
No puedo dispararlos secuencialmente ya que tomaría demasiado tiempo. Hay docenas que necesitan ser despedidos simultáneamente.
¿Hay alguna manera de poner en cola esto, o me estoy acercando a esto de la manera incorrecta?
En la aplicación real, el texto cambia y suceden otras cosas entre ciclos, es por eso que solo puede usar fotogramas clave para que baje, espere y luego vuelva a subir.
Gracias de antemano, y por favor avise si debo publicar/expresar esta pregunta de manera diferente.
$(document).on("click", "#one", function(e) { flipEach() }); function flipEach(){ // itterate through an array of same-class elements and execute on each $(".card").each(function( index ) { // use the index to itterate through the IDs position = "#pos_"+(index+1) // add the transition class to current item in the each/array $( position ).addClass('flipped') // change text and remove item on the current item in the each/array after transitionEnd $( position ).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { // remove the class that flipped it and restore position $( position ).removeClass("flipped"); }); }); }; body { display:flex; align-items: center; text-align: center; } .card { width:80px; height:120px; margin:10px; font-size:50px; text-align:center; background-color: gray; transform-origin: 0% 100%; } .flipped{ transform: rotateX(-180deg); transition-property: transform; transition-duration: 1s; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="one">fipEach</button> <div id="pos_1" class="card">1</div> <div id="pos_2" class="card">2</div> <div id="pos_3" class="card">3</div> <div id="pos_4" class="card">4</div>Tu variable de position está arruinando las cosas. Dado que solo está tratando de usarlo para hacer referencia al elemento actual que se está iterando, es completamente superfluo: solo use this para hacer referencia a ese elemento y agregue la clase y el controlador en su lugar.
$(document).on("click", "#one", function(e) { flipEach() }); function flipEach() { // itterate through an array of same-class elements and execute on each $(".card").each(function() { // add the transition class to current item in the each/array $(this).addClass('flipped') // change text and remove item on the current item in the each/array after transitionEnd $(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { // remove the class that flipped it and restore position $(this).removeClass("flipped"); }); }); }; body { display: flex; align-items: center; text-align: center; } .card { width: 80px; height: 120px; margin: 10px; font-size: 50px; text-align: center; background-color: gray; transform-origin: 0% 100%; } .flipped { transform: rotateX(-180deg); transition-property: transform; transition-duration: 1s; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="one">fipEach</button> <div id="pos_1" class="card">1</div> <div id="pos_2" class="card">2</div> <div id="pos_3" class="card">3</div> <div id="pos_4" class="card">4</div>