我正在编写一个 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”显示在控制台中),但它没有触发。
有什么想法吗?我已经尝试了很多东西...
最佳答案
问题是添加时监听器变量未定义,所以解决方法是在附加事件监听器之前声明它。
_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);
}
关于javascript - 过渡结束事件未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35148996/