How to make React/Redux fade text on update?

1

Hi guys, I finished my random quote machine. I populated it with fun programmer-oriented quotes from sci-fi if you need a fun break. I built it with React/Redux per the Beta FCC curriculum. I was able to randomly select a new color along with the new quote (no immediate repeats), and get the colors to transition by applying CSS transitions to the color. It passes all the tests, but I can’t quite make it look like the model page (which is coded in jQuery, and thus no help).

However, I can’t get the text to fade in and out while being updated, and I’m not quite sure how to make this an A+ project on my own steam, so I’ve submitted, and now I’m asking the class how they would solve the extra credit. Stackoverflow doesn’t have great advice. The closest it came was suggesting the componentWillUpdate() lifecycle hook as place to apply a fadeOut and a fadeIn on a timeout. (I’m pretty new at web technologies, so any syntax advice would be appreciated). If you don’t know what behavior I’m trying to emulate in React, ideally in “raw React” without the extra animation libraries, check out the model page.

2

you could set the classNames you want your animation / transition to be applied on within the react component and go to work applying the animations to those classes with just css, no ?

1 Like
3

No, because the problem is not one of transitioning when style properties change their values (like the background color, which I did), but rather: how do I make the text fade to white and back when I update the store and propagate that change into the React components as props?

4

You can conditionally set the css class within the react component for any element , meaning in the actual DOM a single element can take on different css classes thanks to setState or a prop passed down from the store when rendered, then for each or any class you can assign whatever css animation you need , a common property to vary for fade in is the opacity,

5

Thanks for the link. I actually managed to do this with raw CSS when I was tinkering. How familiar are you with the React Lifecycle? I think that’s the solution, given that the opacity has to be set to 0 as the component is about to update which is now UNSAFE_componentWillUpdate(). I could ADD the class that could make it transparent, but then how do I remove it and replace it with the class where the opacity is 1 again?