0

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.

2
  • para simular el efecto de aparecer y desaparecer; debes programar una animación en css o javascript y al momento de implementar simplemente colocas una promesa que ejecute el efecto y al finalizar le aplique el show al elemento.... entonces lo que te hace falta no lo has intentado hacer...
    – user46896
    Commented el 19 jul. 2021 a las 18:12
  • Te recomiendo que pases a la lecturas de los siguientes artículos: Cómo preguntar y ejemplo mínimo verificable y centro de ayuda y centro de ayuda
    – user46896
    Commented el 19 jul. 2021 a las 18:12

1 respuesta 1

0

Encontre una solucion con la cual fue cambiar las clases de la misma manera que lo hace Jquery pero con Javascript, basicamente reemplazando y añadiendo clases

(function main() {
    let collapseElements = document.querySelectorAll('[data-toggle="collapse"]')[0];
    const CLASS_SHOW = 'show';
    const CLASS_COLLAPSE = 'collapse';
    const CLASS_COLLAPSING = 'collapsing';
    const CLASS_COLLAPSED = 'collapsed';
    const ANIMATION_TIME = 350; // 0.35s


    collapseElements.addEventListener("click",function(e){

        let el = e.currentTarget;
        let collapseTargetId = el.dataset.target || el.href || null;

        if (collapseTargetId) {
            let targetEl = document.querySelector(collapseTargetId);

            let isShown = targetEl.classList.contains(CLASS_SHOW) || targetEl.classList.contains(CLASS_COLLAPSING);
            if(!isShown) {
                targetEl.classList.remove(CLASS_COLLAPSE);
                targetEl.classList.add(CLASS_COLLAPSING);
                targetEl.style.height = 0
                targetEl.classList.remove(CLASS_COLLAPSED);
                setTimeout(() => {
                    targetEl.classList.remove(CLASS_COLLAPSING);
                    targetEl.classList.add(CLASS_COLLAPSE, CLASS_SHOW);
                    targetEl.style.height = '';
                }, ANIMATION_TIME)
                targetEl.style.height = targetEl.scrollHeight + 'px';
            } else {
                targetEl.style.height = `${targetEl.getBoundingClientRect().height}px`
                targetEl.offsetHeight; // force reflow
                targetEl.classList.add(CLASS_COLLAPSING);
                targetEl.classList.remove(CLASS_COLLAPSE, CLASS_SHOW);
                targetEl.style.height = '';
                setTimeout(() => {
                    targetEl.classList.remove(CLASS_COLLAPSING);
                    targetEl.classList.add(CLASS_COLLAPSE);
                }, ANIMATION_TIME)
            }
        }

    })
})();

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.