CODEWITHSUNDEEP
reactjs
User48
User48

Reputation: 3

animate when clicked react animate.css

I’ve got such a div, and me need when clicked on div animate it (add class "flip animated") 

<div className="ui card" onClick={this.reverse}>
    <h1 className="ui header text-center">{this.get_word()}</h1>
</div>

what best way to do this ?

thank you in advance

Upvotes: 0

Views: 1113

Answers (1)

L. Terquem
L. Terquem

Reputation: 56

I'm not sure it's the "best" way to do it, but this way works for me :

First, add a state to your component, that will allow you to track if your div has to be animated or not : 

class MyComponent extends Component {
  state = {
    isAnimated: false
  } ...

Then create a function inside your component that will toggle "isAnimated" :

  // Arrow function for binding
  toggleAnimation = () => {
    this.setState({isAnimated: !this.state.isAnimated});
  }

Then you can add this function to your onClick event, and apply your animation class depending on the state :

<div 
className={`ui card ${this.state.isAnimated && "your-animation-class"}`} 
onClick={this.toggleAnimation}
>
    <h1 className="ui header text-center">{this.get_word()}</h1>
</div>

So when you click on your div, it will toggle isAnimated; and if isAnimated is true, your div will have the class "your-animation-class" (flip animated, I believe) applied.

Hope this helps !

Upvotes: 1

Related Questions