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

Question

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

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

我制作了一个 fiddle 来描述这种行为。

如有任何帮助，我们将不胜感激。

Answer 1

问题是每次单击按钮都会添加一个新的 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');
    });

});

Answer 2

先解绑再设置

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

这大大减少了警报

之前：显示的越来越多

之后：每次只显示3-4个

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

transitionend firing +1 event with if statement

javascript

css

jquery

css-transitions