0

Hice un componente en react que muestra parte de un texto, y con un boton "Ver Mas", el texto pasa a verse completo. Mi pregunta es, como puedo lograr que el cambio se haga mediante una transicion, y no sea un salto abrupto? Intente poner transition: .3s ease all en algunos selectores pero no surtio efecto. Dejo un codepen y mi codigo, por si alguien puede ayudarme.

Codepen https://codepen.io/mani-guerra/pen/mdXZXaP

Mi componente:

const Componente = () => {
  const [view, setView] = useState(false)
  return(
    <>
      <div className={`full-description-container ${view ? "open" : "closed"}`}>
        <p className="full-description">
           // Aca va un texto largo
           </p>
       {!view && <div className="shadow" />}
       </div>
       {!view &&
        <button
          alt="See full description"
          className="read-more-button"
          onClick={() => setView(!view)}
        >
          Read more
        </button>}
     </>
  );
}

Y este es mi CSS

 .full-description-container{
    position: relative;
    height: 150px;
    width: 50vw;
    overflow: hidden;

    &.open{
      height: 100%;
      transition: .4s ease all; /* Esto no me está sirviendo */
    }

    .shadow{
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 50%;
      z-index: 1;
      background: linear-gradient(356.3deg, #FFFFFF 28.22%, rgba(255, 255, 255, 0) 99.34%);
    }
  }

  .read-more-button{
    appearance: none;
    border: 0;
    background-color: transparent;
    color: green;
    font-size: 16px;
    
    transform: translateY(30px);
    transition: .4s ease all;
  }

1 respuesta 1

0

El problema esta en que no puedo aplicar una transicion a un height que no sea fijo. No funciona en porcentajes ni en auto. Entonces la solucion es usar un max-height en ambos casos, y cuando el contenido está desplegado, darle un max-height lo suficientemente alto como para que no quede chico nunca. En mi caso con 2000px estoy sobrado para cualquier resolucion.

.full-description-container{
    position: relative;
    max-height: 150px;
    width: 50vw;
    overflow: hidden;
    transition: .4s ease max-height;

    &.open{
      max-height: 2000;
      transition: .4s ease max-height;
    }

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.