Transitionend用if语句触发+1事件

Question

我有一个if语句，检查一个元素是否有style attr。如果style属性不存在，它会添加一些内联样式。如果它存在，它会移除它。我使用了一个添加了样式的过渡。

我想在transition通过transitionend结束后做//something，但我面临的问题是，每次随后单击元素都会产生另一个transitionend事件。

我做了一个小提琴来描述这个行为。

Answer 1

设置前取消绑定

$('.box').unbind(transEnd);

这大大减少了警报

before: more and more显示

:每次只显示3-4个

Answer 2

问题是每个按钮点击都添加了一个新的transitionEnd事件处理程序，您可以在点击处理程序之外使用单个处理程序

$('button').on('click', function () {
    var inStyle = $('.box').attr('style')
    if (typeof inStyle !== typeof undefined && inStyle !== false) {
        $('.box').removeAttr("style");
    } else {
        $('.box').css('border-color', 'blue');
    }
});
var transEnd = 'transitionend webkitTransitionEnd oTransitionEnd'
$('.box').on(transEnd, function (e) {
    console.log(e.type, e.originalEvent.propertyName, e)
});

---

另一个选择是使用.one()来注册一个只触发一次的处理程序，如

$('button').on('click', function () {
    var inStyle = $('.box').attr('style')
    var transEnd = 'transitionend webkitTransitionEnd oTransitionEnd'
    if (typeof inStyle !== typeof undefined && inStyle !== false) {
        $('.box').removeAttr("style");
    } else {
        $('.box').css('border-color', 'blue');
    }
    $('.box').one(transEnd, function (e) {
        alert('transition ended');
    });
});