Hi! Thanks for your answer.
That’s too bad about the Twitter thing. I really want it to work but I’m just clueless.
I can’t believe I didn’t think of using a fadeOut animation! To be honest, initially I wanted the quotes to just fade In each time they changed with no fadeOut inbetween. Do you think that could be possible?
You’re right about className vs class. I’m not sure why that didn’t throw an error before.
Then in your handleQuote:
- set the toggle to false
- give new text.
- set the toggle to true again.
But since this code will going fast, you can’t see it.
So you can add setTimeout when setState the new quote.
Don’t forget to clearTimeout on componentWillUnmount.
I’m not exactly sure how to do this. Could you elaborate? They way I see it, ‘toggleFade’ should start as ‘true’ in the constructor, then I’d need to ‘setState’ in ‘handleQuote’ to change ‘toggleFade’ to ‘false’ and then update the state once again somewhere changing only the ‘toggleFade’ value. But where/when exactly?
Also thanks for the nice comment. I’m glad you like it . I know I didn’t need to use both frameworks but I think it would be nice going the extra mile to make it look better.
Here’s what I came up with:
The state property ‘toggleFade’ switches between the ‘fadeInUp’ class and a ‘hide’ class which add the “visibility: hidden” CSS property to the quote-text div.
The handleQuote function first toggles the ‘toggleFade’ property and updates the text. That way, the update text is now hidden. Then, within a ‘setTimeout’ function, the ‘toggleFade’ property changes again, triggering the animation once again with the new quote.
This kinda works, but I’ve noticed that if you try click on the ‘New Quote’ button before the animation is done playing, the moving div sometimes blocks the button a bit.
Animations appear to be working, but somehow it breaks every now and then if you click on the button before the animations are done. Not really sure why.