Javascript 在父元素后面显示元素'；s的动画完成了

我想在父元素的动画完成后显示元素。 但现在，我的导航项目显示在导航栏动画之前。 像这样：下图

我在jQuery中尝试了setTimeOut（）和hide（）。但它对我不起作用（可能是因为我对jQuery不熟悉）。 这是我的密码

HTML:

JS:

试试看，也许会有帮助。谢谢

<div class="nav-mini">
    <div class="nav-mini-item">
        <h2>About</h2>
    </div>
    <hr>
    <div class="nav-mini-item">
        <h2>Discover</h2>
    </div>
    <hr>
    <div class="nav-mini-item">
        <h2>Get Started</h2>
    </div>
</div>
<div class="icn-wrapper">
    <svg class="icn-ham" width="20" height="19" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd"><path d="M0 0h16v3H0zM0 6h16v3H0zM0 12h16v3H0z"/></g></svg>
</div>
<div class="icn-wrapper icn-close-wrapper">
    <img class="icn-close" src="images/icon-close-menu.svg" alt="">
</div>

.nav-mini {
        z-index: 1;
        border-radius: 10px;
        width: 90%;
        background-color: #fff;
        position: absolute;
        top: 90px;
        left: 0;
        right: 0;
        margin: auto;
        animation: topToBottom 0.3s ease-in;
    }

var hamburger = $(".icn-ham")
var navbarMini = $(".nav-mini")
var iconClose = $(".icn-close-wrapper")
var navMiniItem = $(".nav-mini-item")

hamburger.click(function() {
  navbarMini.show();
  $(this).hide();
  iconClose.show();
})

iconClose.click(function() {
  navbarMini.hide();
  $(this).hide()
  hamburger.show();
})