Hello, this is my Random Quote Machine project.
It passes the tests, but I would like to implement opacity transitions to ‘fade in’ and ‘fade out’ the main quote on each React render. The freeCodeCamp example (https://codepen.io/freeCodeCamp/full/qRZeGZ) does this with jQuery, but I would like to try and do this in React. I have only been learning Front End Libraries for about 1 week, so please be gentle… haha.
I would use a CSS Transition, except it didn’t work on every render when I tried it - only on the initial page load. So… I have been looking for the past couple of hours at solutions online, and it looks like there is a way to do CSS Transitions in React with a React library called ReactTransitionGroup (https://reactcommunity.org/react-transition-group/css-transition) but I am finding the documentation hard to follow. The only example in CodePen I can find (https://codepen.io/agrewell/pen/ZYdGOJ) looks like it is using an older deprecated version of the library, so it is also hard to follow.
If you have done this Random Quote Machine project already and implemented jQuery-style opacity transitions, could you show me how you did it? Thanks so much for your help.