转换结束事件未触发

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