title: CSS transitionEnd event still listening to finished transition
body: <p>I have two div elements namely <code>.parentDiv</code> and <code>.childDiv</code></p>
  
  <p>I am using css transition to animate both. The <code>.childDiv</code> should animate its opacity first then on transitionend, animate the <code>.parentDiv</code> height, then call on an alert check.</p>
  
  <p>So here is the code : </p>
  
  <pre><code>    $('.childDiv').addClass('faded').on('transitionend', function(){
              $('.childDiv').off('transitionend');
  
              $('.parentDiv')
                  .addClass('no-height')
                  .on('transitionend',event, function() {
                      alert(event.propertyName);
                  });
          });
  </code></pre>
  
  <p>PROBLEM:</p>
  
  <p>after <code>.addClass('faded')</code> it went on to execute the second transition (which is correct). But ontransitionend of <code>.parentDiv</code>, the event.propertyName that has been alerted is 'opacity' and is being fired as soon as the <code>.childDiv</code> finishes its transition.</p>
  
  <p>I want it to only execute when height has been adjusted. Don't get it wrong, "height" is being alerted as well once the height transition is finished but it appears that it also reads other transitions aside from the height adjustment.</p>
  
  <p>here is a jsfiddle of it :
  <a href="http://jsfiddle.net/e9uwA/" rel="nofollow">http://jsfiddle.net/e9uwA/</a></p>
  
  <p>Thank you for the help!</p>