Двойной вызов триггера

Question

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>

Answer 1

Твоя ошибка в том, что ты указал transition: all .2s; но в своем коде ты меняешь только height сделай transition: height .2s; вместо all. И в целом старайся всегда уточнять, какой именно транзишн ты собираешься анимировать.

$("#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>

БЛОГ НА HUSL

Двойной вызов триггера

Ответы (1 шт):