Событие окончания перехода не срабатывает

Question

Я кодирую веб-компонент Polymer и хочу анимировать элемент внутри него. Для такого, что я сделал следующие функции:

_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); 
} 

this._whichTransitionEvent это просто переменный с правильным именем события для текущей платформы, и это работает прекрасно, что это не проблема.

Очевидно, что класс .transition-on CSS добавляет переход и работает правильно.

Я ожидаю, что переход по переходу EndEistener начнется, когда переход заканчивается (так что на консоли появляется сообщение «RIPPLE ENDED»), но оно не срабатывает.

Любые идеи? Я пробовал много чего ...

Answer 1

Проблема заключалась в том, что при добавлении переменной-получателя не было определено, поэтому решение должно объявить ее перед добавлением прослушивателя событий.

_animateRipple: function(x, y, color, amplitude) { 
    var ripple = this.$.ripple; 

    // Ripple ended 
    var transitionEndListener = function() { 
     console.log("RIPPLE ENDED"); 
     ripple.classList.remove("transition-on"); 
     ripple.removeEventListener(this._whichTransitionEvent, transitionEndListener); 
    } 

    // Transition end listener 
    ripple.addEventListener(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); 
}