0

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">

2
  • ¿Puedes compartir tour.css? ¿Qué es lo que has intentado?
    – Alvaro Montoro
    el 24 jun. 2019 a las 2:20
  • He editado tu pregunta para que el código sea ejecutable y he quitado las etiquetas de JavaScript y React. Esto es realmente un "problema" de estilos que aplicaría igual fuera con React o no. Sin definir la animación que estás intentando, esta pregunta queda como muy amplia y subjetiva. No debe ser cualquier animación sino la que quieras en concreto: ¿aparecer poco a poco? ¿crecer verticalmente/horizontalmente? ¿volar desde arriba? ¿una combinación de varias? Es por eso que es importante que compartas más detalles sobre lo que quieres y lo que hayas intentado. Lee Cómo preguntar para más información-
    – Alvaro Montoro
    el 24 jun. 2019 a las 2:42

1 respuesta 1

0

Podrías usar keyframes:

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.info {
  opacity: 0
  animation: fade-in 5s forwards;
}

Ejemplo: https://codesandbox.io/s/festive-shamir-2vbz1?fontsize=14

O podemos usar el componente Transition de la librería react-transition-group:

<Transition in={showInfo} timeout={duration}>
  {state => (
    <p
      style={{
        ...defaultStyle,
        // devolvemos el estilo especifico del estado
        // que nos interesa
        ...transitionStyles[state]
      }}
    >
      Información a mostrar
    </p>
  )}
</Transition>

Ejemplo: https://codesandbox.io/s/focused-flower-kpfvh?fontsize=14

Tu Respuesta

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

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