estoy usando bootstrap sin Jquery debido a que estoy trabajando con Liferay y estoy creando fragmentos por mi cuenta, me encuentro haciendo un navbar y funciona todo bien, mi problema esta en que no logro comprender como hacer funcionar para cuando uno hace click en el boton para mostrar los links en la parte movil, hacia abajo no aparesca de la nada si no con la animacion que viene predeterminada de bootstrap o incluir alguna propia.
Este es mi codigo HTML
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<lfr-editable id="image-editable-01" type="image">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAkSURBVHgB7cxBEQAACAIwtH8Pzw52kxD8OBZgNXsPQUOUwCIgAz0DHTyygaAAAAAASUVORK5CYII="
width="40"
height="40"
alt="">
</lfr-editable>
</a>
<button
class="navbar-toggler mr-3"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
id="buttonPrincipal"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-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>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Este es mi codigo Javascript que es para mostrar los links ocultos cuando se pasa a movil.
var button = document.getElementById("buttonPrincipal");
var div = document.getElementsByClassName("navbar-collapse")[0];
button.addEventListener("click",()=>{
div.classList.toggle("show");
});
No encuentro la manera de hacer que no aparesca tan tosco, quiero darle una animacion para que aparescan los links hacia abajo, se que bootstrap trae esta funcion predeterminada, he intentado con distintas clases e incluso con funciones css propias pero no logro hacerlo funcionar.
Necesito que no sea con jquery, si me pudieran ayudar seria genial!
Muchas gracias.