es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Por qué la propiedad de transición no está funcionando en este caso?

24 Jul, 2023 Programación

Estoy creando un menú hamburguesa y estoy utilizando JavaScript para manejar el estado encendido y apagado del menú. Aquí está cómo se ve mi código:

const hamburgerMenu = document.querySelector('.hamburger-menu');
const sideNav = document.querySelector('.side-nav');

hamburgerMenu.addEventListener('click', () => {
    sideNav.classList.toggle('open');
})

Cuando se hace clic en el menú hamburguesa, el script cambiará la clase “open” en el menú oculto. Quiero que el menú tenga un efecto de transición al aparecer. Aquí está cómo se ve mi SCSS:

.side-nav {
    background: $black;
    display: none;
    padding: 5rem;
    position: absolute;
    top: 10.4rem;
    right: 0;
    bottom: -1.6rem;
    left: 0;
    opacity: 0;
    transition: all .3s ease;
    z-index: 100;
}

.open {
    display: block;
    opacity: 1;
}

De alguna manera, el efecto de transición no está funcionando. ¿Alguien sabe cuál es la razón?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema podría estar con la propiedad display del elemento side-nav. Cuando se cambia display de none a block usando el método toggle(), no permite realizar una transición porque el elemento no existe en la página antes de alternar.

    Una forma de solucionar esto es usar visibility: hidden en lugar de display: none en el CSS. Luego, cambie la propiedad visibility a visible al alternar la clase open. De esta manera, el elemento permanece en la página pero no es visible hasta que se agregue la clase open.

    Así es como se vería el CSS actualizado:

    .side-nav {
    background: $black;
    visibility: hidden;
    padding: 5rem;
    position: absolute;
    top: 10.4rem;
    right: 0;
    bottom: -1.6rem;
    left: 0;
    opacity: 0;
    transition: all .3s ease;
    z-index: 100;

    &.open {
        visibility: visible;
        opacity: 1;
    }
}

    Esto debería permitir que el efecto de transición funcione correctamente al alternar el menú.

Comments are closed.