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

Question

我想检查转换何时结束，但它会触发两次/多次，我想只检查一次当我单击该元素并调用该函数时，而不是在删除该类时再次检查，我尝试使用{{功能结束时1}}，one()甚至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;
}

Answer 1

＆＃13;

＆＃13;

$(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;
        })
    
  }
})

＆＃13;

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

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

它称之为三次，因为您要动画3个元素 - 宽度，高度和背景颜色。它调用＆＃34; transitionend，webkitTransitionEnd等。＆＃34;当他们完成时，每一个。

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

我也改变了checkEndTransition（）函数来监听动画结束而不是过渡结束......

＆＃13;

＆＃13;

$(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)
      })
    })
  }
})

＆＃13;

.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;
  }
}

＆＃13;

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

<div class="main">
  <div>

＆＃13;

＆＃13;

＆＃13;