2

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>
Css3:



.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;   
}
4
  • puedes hacerlo con css y la propiedad transition.
    – Bryro
    Commented el 1 jul. 2022 a las 17:29
  • No veo que tu botón oculte o muestre el contenido del texto. Cómo lo estás implementando actualmente? Agrega el código CSS adicional, tus clases personalizadas Commented el 1 jul. 2022 a las 19:30
  • Jheyman ahi pude poner mi codigo css, intente usar la prop transition pero no lo logro. Commented el 1 jul. 2022 a las 19:48
  • Bryro podrias ser mas especifico, muchas gracias. Commented el 1 jul. 2022 a las 19:49

1 respuesta 1

0

Edité la respuesta debido a que comentaste que no deseas jQuery, entonces prueba así:

const btn = document.querySelector(".boton");
const text = document.querySelector(".leer-mas");
const wrapper = document.querySelector(".wrapper");

btn.addEventListener("click", e => {
    text.classList.toggle("leer-mas_open");
    text.classList.contains("leer-mas_open") ? btn.innerHTML = "Leer Menos" : btn.innerHTML = "Leer Mas";
});
    .leer-mas {
        display: block;
        opacity: 0;
        max-height: 0;
        transition: all 0.5s;
    }

    .leer-mas_open {
        display: block;
        opacity: 1;
        max-height: 500px;
    }

    .wrapper {
        width: 40rem; /*PUEDES CAMBIAR PARA MODIFICAR EL ANCHO DEL DIV PADRE*/
        color: #000;
        margin: auto;
    }

    .contenedor {
        padding: 0.25rem;
    }

    .titulo {
        font-size: 1.7em;
        margin-bottom: 1rem;
        letter-spacing: 1px;
    }

    p {
        font-size: 0.8rem;
    }

    .boton {
        display: inline-block;
        color: white;
        background-color: grey;
        padding: 0.6rem 1.5rem;
        font-size: 1em;
        position: relative;
        z-index: 1;
        transition: all 0.5s;
        cursor: pointer;
    }

    .boton:hover {
        background-color: #fff;
        color: grey;
        box-shadow: 0 0 2 rem rgba(0, 0, 0, 0.1);
        transform: translateY(-3px);
    }
<div class="wrapper">
    <div class="contenedor">
        <h1 class="titulo"> Hola perros</h1>
        <p id="parrafo">
            Lorem ipsum dolor sit amet
            <span class="leer-mas">
            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!
            </span>
        </p>
        <p class="boton">Read More</p>
    </div>
</div>

4
  • Hola Evil agradezco tu respuesta pero no podria ser posible lograr lo mismo sin usar jquery? estoy intentando usar transition en css y no lo logro. gracias igual Commented el 1 jul. 2022 a las 19:27
  • Edité la respuesta, ojalá te sirva. Saludos
    – EvilFearzZ
    Commented el 1 jul. 2022 a las 21:50
  • muchas gracias, me sirvio. Saludos Commented el 2 jul. 2022 a las 17:10
  • Si la respuesta te sirvió, no olvides marcarla como correcta, saludos
    – EvilFearzZ
    Commented el 2 jul. 2022 a las 23:04

Tu Respuesta

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

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