React-Transition

I want to make my quote machine generator have transition effect. When I click New Quote btn, I’m able to get the color transition smoothly but I can’t make the quote and author transition. I tried style= {{transition: “2.5s ease-out” }} on the p element but it doesn’t work . Here is my QuoteDisplay component. It only includes quote and author.

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
function QuoteDisplay({ quote, author, theme }) {
  return (
    <div id="quote-box">
      <section className="vh-50 bg-light">
        <div className="container py-5 h-100">
          <div className="row d-flex justify-content-center align-items-center h-100">
            <div className="col-md-12 col-xl-5">
              <div
                className="card text-white"
                style={{
                  backgroundColor: theme,
                  borderRadius: "15px",
                  transition: "2.5s ease-out",
                }}
              >
                <div className="card-body p-5">
                  <i className="fas fa-quote-left fa-2x mb-4"></i>

                  <p className="lead" style={{ animation: "3s rollout" }}>
                    {quote}
                  </p>

                  <hr />

                  <div className="d-flex justify-content-between">
                    <p className="mb-0">{author}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
export default QuoteDisplay;

and this is my App.jsx

import { useState } from "react";
import React from "react";
import QuoteDisplay from "./QuoteDisplay.jsx";
import randomQuote from "random-quotes";
import NewQuoteBtn from "./NewQuoteBtn.jsx";
import "bootstrap/dist/css/bootstrap.css";


function App() {
  const initialColorState = `#${Math.floor(Math.random() * 16777215).toString(
    16
  )}`;
  const [quote, setNewQuote] = useState(randomQuote);
  const [themeColor, setThemeColor] = useState(initialColorState);

  console.log(quote);
  const onClick = (e) => {
    e.preventDefault();
    setNewQuote(randomQuote());
    setThemeColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
  };
  return (
    <div>
      <QuoteDisplay
        quote={quote.body}
        author={quote.author}
        theme={themeColor}
      />

      <NewQuoteBtn onClick={onClick} theme={themeColor} />
    </div>
  );
}
export default App;

Animation is visualising a change in a value over time. The colour animation works because you are animating a colour change on an element that’s always there. The other animations don’t work because you’re replacing an element: React just switches it out immediately, so there’s zero time for an animation to run.

If you want to do this, then use an animation library. What they normally provide is a wrapper element. You wrap the HTML thing you want to animate in that, and the library takes care of essentially slowing down the process of removing/adding elements so that the animations you set have time to run.

1 Like