Home / Questions / 274036
Accepted
Ceci Benitez
Asked: 2020-06-23 13:24:41 +0800 CST 2020-06-23 13:24:41 +0800 CST

Add smooth transition when displaying text

  • 772

What I want to achieve is a less harsh effect when the text is displayed, add a class with some transition or animation so that the text appears little by little and doesn't look so harsh.

I am using React and I want to create this class for the component Tour, the info is in the p. I don't know if I should add the class to the paragraph or the button that is in the span, or what transition would be appropriate.

How to add a class that makes a smooth transition when clicking on a button that shows more text?

This is the code:

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

css

1 Answers

  1. Best Answer

    You could use keyframes:

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

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

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

    Or we can use Transitionthe library component 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>

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

    • 0