Lo que quiero lograr es un efecto menos duro cuando se muestra el texto, agregar una clase con alguna transición o animación para que el texto aparezca de a poco y no se vea tan duro.
Estoy usando React y quiero crear esta clase para el componente Tour
, la info esta en el p
. No sé si debería agregar la clase al párrafo o al botón que está en el span
, o qué transición sería la adecuada.
¿Cómo agregar una clase que haga una transición suave al hacer click en un botón que muestra más texto?
Éste es el código:
class Tour extends React.Component {
state = {
showInfo: false
}
handleInfo = () => {
this.setState({
showInfo: !this.state.showInfo
});
}
render() {
const { city, img, name, info } = this.props.tour;
return (
<article className = "tour">
<div className ="card">
<img src = {img} className = "img-fluid card-img-top" />
<span className = "close-btn">
<i class="fa fa-window-close" aria-hidden="true"></i>
</span>
<div className="card-body">
<h3>{city}</h3>
<h4>{name}</h4>
<h5>info{" "}
<span onClick={this.handleInfo}>
<i className="fa fa-arrow-down" ariaHidden="true"></i>
</span>
</h5>
{this.state.showInfo && <p>{info}</p>}
</div>
</div>
</article>
);
}
}
// CC BY 2.0 Wikipedia
ReactDOM.render(
<Tour tour={{ city: "Jaén", img: "https://upload.wikimedia.org/wikipedia/commons/b/b2/Ja%C3%A9n-loc.svg", name: "Capital del Santo Reino", info: "Jaén es una ciudad y municipio español de la comunidad autónoma de Andalucía, capital de la provincia homónima. Ostenta el título de «Muy Noble y Muy Leal Ciudad de Jaén, Guarda y Defendimiento de los Reinos de Castilla»" }} />,
document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">