主页 / 问题 / 1128549
Accepted
Виталий Шебаниц
Asked:2020-05-20 18:39:40 +0800 CST2020-05-20 18:39:40 +0800 CST

双重通话触发

  • 772

transitransitionend它被调用了2次，我不明白为什么。

$("#t").click(function(){
  $("#d").toggleClass("asd");
});

$(".asd").on("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEndtionend", function(){
  alert(123)
});
.asd {
  display:block;
  transition: all .2s;
  background-color: red;
  height: 400px;
}

div:not(.asd) {
  height:0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="t">test</button>
<div class="asd" id="d">asdasfasd</div>

javascript

1 个回答

  1. Best Answer

    您的错误是您指出 transition: all .2s; 但在您的代码中您只更改height do transition: height .2s;而不是全部。通常，请尝试始终指定您要制作动画的过渡类型。

    $("#t").click(function(){
  $("#d").toggleClass("asd");
});

$(".asd").on("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEndtionend", function(){
  alert(123)
});
    .asd {
  display:block;
  transition: height .2s;
  background-color: red;
  height: 400px;
}

div:not(.asd) {
  height:0px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="t">test</button>
<div class="asd" id="d">asdasfasd</div>

    • 1

相关问题