javascript - 过渡结束事件未触发

Question

我正在编写一个 Polymer 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);
}