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?
display
no se puede animar.