0

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?"

2

1 respuesta 1

0

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>

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.