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.
i don’t have sample code but someone else was asking about this and I used the same codepen you posted about combined with their code to make a word transition on entry
see here: (warning: not clean or very good code because of the frankenstein nature but good enough to show it works and the basic idea)
1 Like
Thanks for responding, I have worked out after trying to fork your CodePen project that I can get it to work by manually importing the older versions of the React library and the React DOM library, by copying the URLs in the Pen Settings section of CodePen, specifically it needs to load version 15.4.1 instead of 16.4.2. Maybe I will try and get it to work with the old version of React and then have a go later bringing it up to date, if I have time 
1 Like
I have a couple of other pens that do pure css animations. They are my own code so easier to inderstand. One is a bus travelling from left to the center of the page, another kinds of expands its border and changes its color (using keyframes). Let me know if you may want to see those for ref also and i can link them here. My understanding is that to get the react version working you have to write the css code for the animation correctly so playing with that first is probably a good idea (trying to do the fading effect for example on hover then modify the rule later for react)