title: Transition end event not firing
body: <p>I am coding a Polymer web component and I want to animate an element inside of it. For such thing I did the following function:</p>
  
  <pre><code>_animateRipple: function(x, y, color, amplitude) {
      var ripple = this.$.ripple;
  
      // Transition end listener
      ripple.addEventListener(this._whichTransitionEvent, transitionEndListener);
  
      // Ripple ended
      var transitionEndListener = function() {
          console.log("RIPPLE ENDED");
          ripple.classList.remove("transition-on");
          ripple.removeEventListener(this._whichTransitionEvent, transitionEndListener);
      }
  
      // Initial styling
      ripple.style.top = y + "px";
      ripple.style.left = x + "px";
      ripple.style.height = ripple.style.width = "0";
      ripple.style.backgroundColor = color;
  
      // Trigger ripple
      setTimeout(function() {
          ripple.classList.add("transition-on");
          ripple.style.height = ripple.style.width = amplitude + "px";
          ripple.style.top = y - (amplitude / 2) + "px";
          ripple.style.left = x - (amplitude / 2) + "px";
      }, 20);
  }
  </code></pre>
  
  <p>this._whichTransitionEvent is just a variable with the correct event name for the current platform and it works fine, that is not the problem.</p>
  
  <p>Obviously the .transition-on CSS class adds the transition and it works correctly.</p>
  
  <p>I expect transitionEndListener to fire when transition ends (so that "RIPPLE ENDED" shows up in the console), but it is not firing.</p>
  
  <p>Any ideas? I've tried a lot of things...</p>