estaba practicando utilizar el boton leer mas o leer menos para mostrar o no un texto, lo pude hacer mi problema es que no se como hacer una animacion, yo quiero que al mostrar el parrafo, el cambio no sea tran brusco,que tarde unos 3 segundos por lo menos. Asi sea para mostrarlo y tambien para ocultarlo. ¿Alguna idea? Mil gracias dejo mi codigo
const parrafo = document.querySelector(".parrafo");
const boton = document.querySelector(".boton");
boton.addEventListener("click", (e) => {
parrafo.classList.toggle("parrafo-visible")
if (parrafo.classList.contains("parrafo-visible")) {
boton.innerHTML = "Leer menos";
} else {
boton.innerHTML = "Leer más";
}
})
<div class="contenedor">
<h1 class="titulo">
Hola perros
</h1>
<p class="parrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dicta rem fugiat numquam at maxime expedita voluptate fugit, culpa soluta, voluptatibus facere quo autem laudantium corporis molestiae? Voluptatem, temporibus pariatur. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Adipisci reprehenderit expedita explicabo libero officia impedit nisi odio. Fuga velit rerum sit nisi corrupti earum temporibus, officia, eveniet voluptas aperiam sint. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Nam delectus, facilis saepe placeat mollitia minima repudiandae dignissimos. Voluptatem doloremque deserunt suscipit, recusandae voluptas quia. At molestias laborum neque quos fugiat! </p>
<button class="boton">Leer mas</button>
</div>
.contenedor{
width: 50%;
background-color: aqua;
margin: auto;
}
.titulo{
margin: 0;
text-align: center;
}
.parrafo{
display:none;
}
.parrafo-visible{
display: block;
margin-top: 10px;
}
.boton{
display: block;
margin: auto;
font-size: 20px;
border-radius: 30px;
padding: 10px 20px;
cursor: pointer;
border: none;
}