1

Quiero hacer que la transición entre la clase show y la noShow, sea suave. Mi código es este:

<aside class="noShow" id='asideFiltros'>
            <h3>Filtros</h3>
            <h4>Ingrese el precio</h4>
            <input type="number" placeholder="Precio en $">

            <h4>Ingrese Marca</h4>
            <select id="marcas">
                <option value="audi">Audi</option>
                <option value="volkswagen">Volkswagen</option>
                <option value="toyota">Toyota</option>
                <option value="Honda">Honda</option>
            </select>

            <h4>Ingrese el orden de precios</h4>
            <select id="ordenPrecios">
                <option value="relevancia">Más Relevante</option>
                <option value="precioBajo">Precio más bajo</option>
                <option value="precioAlto">Precio más alto</option>
            </select>
        </aside>

Mi CSS es este:

#asideFiltros.show{
    transform: scale(1);
    width: 30%;
    background-color: #bada55;
    position: absolute;
    right: 21%;
    padding: 10px;
    transition: visibility 1s linear;
  
  }
  #asideFiltros.noShow{
    transform: scale(0);
    display: none;
  }

Y mi Javascript es este:

let filtros = document.getElementById('filtro');

filtros.onclick = () => {
    let aside = document.getElementById('asideFiltros');

    if (aside.classList.contains('noShow')){
        aside.classList.remove('noShow');
        aside.classList.add('show');
    }else{
        aside.classList.add('noShow');
        aside.classList.remove('show');
    }
}

Intenté con un transform: scale y con un transform: translate, pero ninguno me funcionó correctamente. Alguna idea?

2
  • 1
    Pista: la propiedad display no se puede animar.
    – padaleiana
    el 11 ene. 2022 a las 14:27
  • Y entonces como puedo hacer? Para que quede lindo... el 11 ene. 2022 a las 15:57

1 respuesta 1

2

Como te dijeron en comentarios, la propiedad display no se puede animar, pero está la alternativa de usar altura máxima (max-height):

Si la pones en cero, el elemento no se mostrará ni ocupará espacio en pantalla, que es lo que buscas con display: none;.

Para que se muestre, cambias por un número igual o mayor a la altura que debe tener el elemento; si no la sabes, usa un número grande, teniendo en cuenta que puede afectar la forma en que se efectúa la animación.

Te propongo que uses una sola clase que puedas intercambiar fácilmente con .toggle() sin tener que analizar.

Solo necesitas asignar los estilos del estado oculto por ID y crear una clase .show para mostrar, donde solo cambies las propiedades necesarias.

let filtros = document.getElementById('filtro');

filtros.onclick = () => {
    let aside = document.getElementById('asideFiltros');
    // Solo alterna la clase
    aside.classList.toggle('show');
}
/* El elemento debe tener toda la configuración necesaria */
#asideFiltros {
    transform: scale(0);
    width: 30%;
    background-color: #bada55;
    position: absolute;
    right: 21%;
    padding: 10px;
    /* Aplica la transición a cualquier atributo disponible */
    transition: all 0.5s linear;
    /* Ocultar y que no ocupe espacio en pantalla */
    max-height: 0;
}
#asideFiltros.show {
    transform: scale(1);
    /* Si no sabes la altura exacta asigna un valor alto */
    max-height: 400px;
}
<div id="filtro">
    Mostrar filtros
    <aside id='asideFiltros'>
        <h3>Filtros</h3>
        <h4>Ingrese el precio</h4>
        <input type="number" placeholder="Precio en $">

        <h4>Ingrese Marca</h4>
        <select id="marcas">
            <option value="audi">Audi</option>
            <option value="volkswagen">Volkswagen</option>
            <option value="toyota">Toyota</option>
            <option value="Honda">Honda</option>
        </select>

        <h4>Ingrese el orden de precios</h4>
        <select id="ordenPrecios">
            <option value="relevancia">Más Relevante</option>
            <option value="precioBajo">Precio más bajo</option>
            <option value="precioAlto">Precio más alto</option>
        </select>
    </aside>
</div>

Tu Respuesta

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

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