Javascript 带引导100%高度问题的动画折叠菜单

我正在使用Bootstrap3构建一个带有切换汉堡按钮的侧导航。基本上，我给了普通条一定的宽度，然后使用类.collapse、.collapsing.collapse.in，因为这是切换菜单的三种不同状态。我的目标是让菜单栏稳定地折叠起来，现在发生的是菜单栏在内容结束前都能很好地打开。在内容的结尾，它会中断。酒吧的高度是100%的窗口大小，固定在左侧，而其宽度约为400px。我曾尝试使用绝对位置和底部0将内容添加到导航的底部，但没有成功

谢谢

nav ul {
    width: 245px;
}
.collapsing {
    position: fixed;
    z-index: 1000;
    background: #ba2625;
    top: 0;
    bottom: 0;
    box-shadow: 4px 6px 6px black;
}
.navbar-collapse.collapse {
    display: none!important;
    height: 100% ;
    top: 0;
    bottom: 0;
}
.collapse.in {
    position: fixed;
    z-index: 1000;
    display: block!important;
    background: #ba2625;
    top: 0;
    bottom: 0;
    box-shadow: 4px 6px 6px black;
}

---

请添加您的html。请用您的代码做一个提琴或引导，并在您的问题中升级。@Irfan Muhammad这是一个很酷的解决方案，但我仍然希望菜单在高度之间转换，但我希望从0%转换到100%。现在的情况是，它运行平稳，直到内容达到高度，然后刹车填充其余部分，没有动画。由于公司的政策，我无法添加实际代码，我将尝试给出一个示例。