1

tengo una función en Js que hace un cambio de pestañas o tabs de contenidos, algo similar a Jquery tabs, pero quisiera saber cómo puedo añadir un efecto de transición o fade in al momento que cambia el contenido y pasa de display none o display block.

dejo el código de la función aquí.

function openPage(pageName) {
            // oculta todos los elementos que contengan la clase tabs_content */
            var i, tabcontent;
            tabcontent = document.getElementsByClassName("tabs_content");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            //muestra un tabs_content especifico
            document.getElementById(pageName).style.display = "block";

        }

1 respuesta 1

1

No puedes aplicar animación o transición a la propiedad display, pero puedes probar con ancho y alto mínimo de los elementos, junto con opacidad. Adicionalmente, tal vez necesites probar con posición absoluta para que no se vea como que los elementos se empujan, pero ya queda para que lo investigues.

document.querySelector('ul').addEventListener('click', e => {
    // Solo si el clic fue en un enlace
    if(e.target.tagName == 'A') {
        // Ocultar div activo
        document.querySelector('.divtab.mostrar').classList.remove('mostrar');
        // Obtener ID del div a mostrar
        let id = e.target.href.split('#')[1];
        // Agregar clave al div destino
        document.getElementById(id).classList.add('mostrar');
    }
});
ul {
    list-style: none;
    display: block;
    margin: 10px 0;
    padding: 0;
}
ul li {
    display: inline-block;
    margin: 0 10px;
}
.divtab {
    opacity: 0;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    border: 1px #000 solid;
    transition: all 0.5s ease;
}
.divtab.mostrar {
    opacity: 1;
    max-width: 100%;
    /* Asigna este atributo de acuerdo al contenido o contenedor */
    max-height: 200px;
    padding: 20px;
}
<ul>
    <li><a href="#div1">Div 1</a></li>
    <li><a href="#div2">Div 2</a></li>
<ul>
<div id="div1" class="divtab mostrar">Contenido del div 1</div>
<div id="div2" class="divtab">Contenido del div 2</div>

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.