¿Cómo puedo detectar el final de una transición de CSS en un elemento 'específico' mientras se realizan múltiples transiciones?

Question

He estado usando el siguiente para detectar el final de una transición CSS3, así: -

CACHE.previewControlWrap.css({ 
       'bottom':'-217px' 
      }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { 
       CACHE.songWrap.css({ 
        'bottom': '0' 
       }); 
    }); 

Esto funciona perfectamente, una transición CSS se lleva a cabo, a continuación, cuando se completa, otro ocupa su lugar.

Sin embargo, cuando anulo esta función anónima en un tercer nivel, no funciona. El tercer evento de 'finalización' de transición se activa al mismo tiempo que el segundo, en lugar de encadenarlos uno tras otro (como ocurriría con jQuery .animate())

Lo que me gustaría hacer es vincular el 'transitionend' 'evento a elemento' específico '. Actualmente parece buscar un evento transitionend en cualquier elemento y dispara en consecuencia. Si no es así, ¿hay otra solución para que pueda tener tres sucesivos eventos de transición de CSS a la cola de todos los disparos después de que el anterior complete.

Gracias de antemano.

A continuación se muestra el código que está causando el problema: -

if(Modernizr.csstransitions){ 

     CACHE.leftcolbottom.css({ 
      'left':'-230px' 
     }); 
     CACHE.songwrap.css({ 
      'left':'100%', 
      'right': '-100%' 
     }); 
     CACHE.previewControlWrap.css({ 
      'bottom':'-217px' 
     }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { 
      CACHE.songWrap.css({ 
       'bottom': '0' 
      }); 
      CACHE.middle.css({ 
       'bottom': '350px' 
      }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { 
       CACHE.slidewrap.css({ 
        'left': '50%', 
        'right': '0%' 
       }); 
       CACHE.leftcoltop.css({ 
        'left': '0%' 
       });  
      });   
     }); 

    } 

Answer 1

bien, me he encontrado realmente la respuesta a mí mismo, es de esperar que esto ayudará a otra persona con el mismo tema.

La solución es utilizar el método estándar jQuery .on() en lugar del método 'fire once' .one(). Luego, verifique si el objetivo para el elemento al que enlazó el evento, y finalmente, elimine el controlador de eventos dentro de la misma función anónima.

El hace que el 'tercer' anidado código de transición como esto en mi caso: -

}).on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function (e) { 
       if($(e.target).is(this)){ 
        CACHE.slidewrap.css({ 
         'left': '50%', 
         'right': '0%' 
        }); 
        CACHE.leftcoltop.css({ 
         'left': '0%' 
        }); 
        $(this).off('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd'); 
       } 
      });  

Si alguien tiene una solución más elegante, por favor hágamelo saber y voy a conceder la respuesta a usted como apropiado.