Animation using React in Random Quote Machine

I’ve finished almost every feature required for this project, except for the animation seen in the sample project they provided. Those animations would easily be done using jQuery, but I have no idea how to do the same thing in React.

More specifically, what I have right now and what I need to do is:

  • I have a component QuoteBox, which contains a p containing the quote, a button to randomly select a new quote.

  • I have a component QuoteMachineApp that render QuoteBox along with a Footer component inside a div classed “containers”.

  • Now I need some way to trigger animation on the p (fade out, change text color, then fade in), and on the background of the div “containers” (change background color); both of these animations triggered when the button is clicked.

Thank you very much.