Me gustaría que el contenido de un elemento se desvanezca gradualmente cuando se hace clic en un botón y que el contenido se vuelva visible nuevamente al hacer clic en el botón nuevamente. ¿Pueden proporcionar un ejemplo de código para lograr este efecto?"
-
En Google hay muchos ejemplo de códigos– Franqo Balsamoel 13 sep. a las 1:55
-
Siempre muestra un ejemplo mínimo verificable de lo que has intentado hasta el momento. Stack Overflow en español no es un servicio del tipo gimme the codez (que traducido sería como dameh el códigoh). Lee Cómo preguntar y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.– padaleianael 13 sep. a las 12:15
1 respuesta
Cada vez que presiones el botón al elemento le agregas una clase css, para eso puedes usar la función toggle, la cual agrega la clase si es que el elemento no cuenta con ella, y en caso contrario la remueve.
Hay varias formas de lograr este efecto, la más fácil es usando Transition
Esta propiedad te permite establecer una transición cuando el valor de otra propiedad cambia (en tu caso opacity
). Puedes establecer el tiempo que dura la transición y una transition-timing-function que es una curva que permite variar la aceleración de la transición, por ejemplo puedes hacer que comience lento y termine de golpe
function animar(){
elemento.classList.toggle("oculto");
}
#elemento{
width: 100px;
height: 100px;
background: red;
transition: opacity 0.9s ease-in;
}
.oculto{
opacity:0;
}
<button onclick="animar()">Animar</button>
<div id="elemento"></div>