仅当 div 高度为 0（动画）时才运行函数，而不是在 [重复] 之前

Question

例如，我只有一个像这样的简单 html：

<div class="visible_div">My Div</div>
<div class="invisible_div">Now you can see me!</div>
<div class="button">My Button</div>

我使用以下代码仅通过 addClass 将 div“visible_div”从“500px”（只是一个示例值）隐藏到“0px”（我想使用 css 方式）。通过 CSS 转换，这可能需要 0.3 秒。

JS：

$(".button").click(function(){   
    $(".visible_div").addClass("hide");
});

CSS：

.visible_div {
  height: 500px
  transition: height 0.3s;}

.visible_div.hide {
  height: 0px}

所以，如果 div "visible_div" 的高度为 "0"，我将运行以下脚本，但不是在此之前！

$(".invisible_div").addClass("show");

我的问题：如何检查 div "visible_div" 是否不再可见，在 js 脚本内没有延迟，等待 css 动画？

Answer 1

订阅transitionend活动：

$(".button").click(function() {   
    $(".visible_div").addClass("hide");
});

$(".visible_div").on('transitionend', function() {
    $(".invisible_div").addClass("show");
});