轉換結束事件未觸發

Question

我正在編寫聚合物Web組件，並且我想爲其中的元素設置動畫。對於這樣的事情，我做了以下功能：

_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類添加了轉換並且它可以正常工作。

我希望transitionEndListener在轉換結束時觸發（以便在控制檯中顯示「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); 
}