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.
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;
}