如何防止此 transitionend 事件运行两次/多次？答案

【问题标题】：How to prevent this transitionend event from running twice/multiple times?如何防止此 transitionend 事件运行两次/多次？
【发布时间】：2018-04-06 08:23:58
【问题描述】：

我想检查过渡何时结束，但它会触发两次/多次，我只想在单击元素并调用函数时检查一次，而不是在删除类时再次检查，我尝试使用 @987654321 @, stopPropagation() 甚至 return false 在函数的末尾，但它不起作用，如何实现？

这是一个例子：

$(document).ready(function() {
    $(document).on("click", ".main", function() {
        $(this).addClass('example');
        checkEndTransition()
    })
    
    function checkEndTransition() {
        $(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() {
            $.when($(this)).done(function() {
                console.log("Finished")
                var val = $(this)
                setTimeout(function () {
                    val.removeClass("example")
                }, 1500)
            })
        })
    }
})

.main{
  width: 170px;
  height: 170px;
  background-color: lightgrey;
  transition: 1.5s;
}

.example{
  width: 250px;
  height: 250px;
  background-color: #7fff7f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <div>
  </div>
<div>

【问题讨论】：

它调用了 3 次，因为您正在制作 3 个元素的动画 - 宽度、高度和背景颜色。它称为“transitionend、webkitTransitionEnd 等”。当他们完成时为每一个
你的$.when(this).done(... 逻辑也是多余的

标签： javascript jquery css events transition

【解决方案1】：

$(document).ready(function() {
    $(document).on("click", ".main", function() {
        $(this).addClass('example');
        checkEndTransition();
    })
    
    function checkEndTransition() {
       var flag = true;
        $(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() {
if(flag){
            
            $.when($(this)).done(function() {
                console.log("Finished");
                var val = $(this);
                setTimeout(function () {
                    val.removeClass("example");
                }, 1500)
            })
          }
         flag = false;
        })
    
  }
})

.main{
  width: 170px;
  height: 170px;
  background-color: lightgrey;
  transition: 1.5s;
}

.example{
  width: 250px;
  height: 250px;
  background-color: #7fff7f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <div>
  </div>
<div>

您的问题是$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() 多次运行。您可以使用标志使其仅运行一次。使用上面的脚本，它会工作的。

【讨论】：

然后，当元素再次缩小时，它就再也不会起作用了——尽管这可能是 OP 的目标。
是的，这就是我要找的东西，但是如果我只调用一次，为什么它会运行多次？
正如@jesus 在评论中提到的那样，它可能会运行多次，因为您正在将转换事件与主 div 绑定，并且在主 DIV 上发生了多个转换。我的回答解决了你的问题吗？
@SmitRaval 感谢您给予我的信任。顺便说一句，我下面的解决方案有效......
@SilverSurfer 如果此答案对您有所帮助，请将其标记为已批准，以便将来可以帮助其他人。 :) 谢谢

【解决方案2】：

它调用了 3 次，因为您正在为 3 个元素设置动画 - 宽度、高度和背景颜色。它称为“transitionend、webkitTransitionEnd 等”。当他们完成时为每一个。

为了避免这种情况，不要使用过渡，而是使用关键帧对象。

我还将 checkEndTransition() 函数更改为现在监听动画结束而不是过渡结束...

$(document).ready(function() {
  $(document).on("click", ".main", function() {
    $(this).addClass('example');
    checkEndTransition()
  })

  function checkEndTransition() {
    $(document).on("animationEnd webkitAnimationEnd", ".main", function() {
      $.when($(this)).done(function() {
        console.log("Finished")
        var val = $(this)
        setTimeout(function() {
          val.removeClass("example")
        }, 1500)
      })
    })
  }
})

.main {
  width: 170px;
  height: 170px;
  background-color: lightgrey;
}

.example {
  animation: change 1 3s ease;
  -webkit-animation: change 1 3s ease;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes change {
  0% {
    width: 170px;
    height: 170px;
    background-color: lightgrey;
  }
  50% {
    width: 250px;
    height: 250px;
    background-color: #7fff7f;
  }
  100% {
    width: 170px;
    height: 170px;
    background-color: lightgrey;
  }
}

@keyframes change {
  0% {
    width: 170px;
    height: 170px;
    background-color: lightgrey;
  }
  50% {
    width: 250px;
    height: 250px;
    background-color: #7fff7f;
  }
  100% {
    width: 170px;
    height: 170px;
    background-color: lightgrey;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <div>

【讨论】：