CSS transition of menu height on show/collapse event - html

Question

I am working on horizontal navbar with collapsible menu. I am using bootstrap 4 and angular. Collapsing/showing is working fine on menu icon click, but I want to bind some CSS transitions (changing height slowly). My simple code is here:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">SOME BRAND</a>
<button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" (click)="toogle();" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="menu" [ngClass]="activeClass ? 'show' : 'collapse'" data-parent="#toggler">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
My CSS is:
.on-slide-down {
height: 500px;
}
#menu {
transition: height 1.5s ease;
height: auto;
overflow: hidden;
}
And JS function is:
toogle(){
this.activeClass = !this.activeClass;
let menu:HTMLElement = document.querySelector("#menu");
menu.classList.toggle("on-slide-down");
}
So my idea is to dynamically bind the class .on-slide-down which increase height. Unfortunately, the transitions is not working. Collapsing and showing the menu has still it's default behaviour. I was doing it according this example, but I dont know where is the problem.

Answer 1

Why not just override the normal Bootstrap collapse transition? This way you don't need the extra JS:
https://www.codeply.com/go/WJmJoNIlbA
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">SOME BRAND</a>
<button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="menu" data-parent="#toggler">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
CSS:
#menu {
transition: height 1.5s ease;
}