Fade in/ Fade out animations with react-reveal

JavaScript
1

Hello,

I am working on my random quote generator and I want to add a nice fade in and fade out effect each time a new quote is generated. I am using the react-reveal library and so far I have gotten the text to fade in and out each time to button is clicked.

Here’s the problem: When the button is clicked, the method changes the state to display a new quote, but it also changes the show property which toggles the fade effect. Essentially the user has to click the button twice which is obviously an issue. Here’s the code:

import React, { Component } from "react";
import "../styles/styles.css";
import { quotes } from "../services/quotes";
import { getRandomQuote } from "../services/quotes";
import { getRandomAuthor } from "../services/quotes";
import QuoteBox from "./quoteBox";
import Fade from "react-reveal/Fade";


class Quote extends Component {
  state = {
    quote: getRandomQuote(),
    author: getRandomAuthor(),
    show: false,
  };

  getQuote = () => {
    const randomIndex = Math.floor(Math.random() * quotes.quote.length);
    const displayQuote = { ...this.state };

    displayQuote.quote = quotes.quote[randomIndex];
    displayQuote.author = quotes.author[randomIndex];
    console.log(displayQuote);
    this.setState({
      quote: displayQuote.quote,
      author: displayQuote.author,
      show: !this.state.show,
    });
  };

  render() {
    return (
      <main id="quote-box" className="container-fluid">
        <div className="text-center mt-5">
          <h1>Random Quote Generator</h1>
        </div>

        <div style={{ width: 200 }} className="mx-auto mt-5">
          <button
            id="new-quote"
            onClick={this.getQuote}
            className="btn btn-primary"
          >
            Generate Quote
          </button>
        </div>
        <Fade when={this.state.show}>
          <QuoteBox state={this.state} />
        </Fade>
      </main>
    );
  }
}

export default Quote;

My goal here is when the button is clicked, fade out the old quote, change the state to update the quote, and fade in the new quote. Is this possible using react-reveal, or do I need to use a different approach?

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.