Question

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

我希望在//something之后通过transition结束transitionend，但我面临的问题是每次后续点击该元素都会产生另一个transitionend事件

我做了一个描述这种行为的fiddle。

任何帮助都将不胜感激。

Answer 1

在设置之前取消绑定

＆＃13;

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

＆＃13;

这大大减少了警报

之前：显示越来越多

之后：每次只显示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');
    });

});

transitionend使用if语句触发+1事件

2 个答案: