小编tan*_*nim的帖子

所以，我完成了FCC的项目“随机报价机”，我已经完成了所有基本要求，例如更改报价、颜色和推特报价。但我不能做的一件事是引号的淡入和淡出动画，例如这样：https: //codepen.io/freeCodeCamp/pen/qRZeGZ

在上面的链接中，动画是由 jQuery 完成的。但我已经在 ReactJS 上完成了我的项目

如果您想分叉，这是我的codesandbox：https://codesandbox.io/s/amazing-feistel-b2u6j

这也是代码：

import React from "react";
import "./styles.css";

import { useState, useCallback } from "react";
import {
  ChakraProvider,
  Box,
  Text,
  Button,
  Icon,
  Flex,
  HStack,
  Link
} from "@chakra-ui/react";

import { FaTwitter, FaQuoteLeft } from "react-icons/fa";
import quoteArray from "../public/quotes";
import { defaultColor, getRandomColor } from "../public/color";

const QuoteBox = () => {
  const [loading, setLoading] = useState(true);
  const [quote, setQuote] = useState(null);
  const [color, setColor] = useState(defaultColor);

  const onQuoteChange = useCallback(async () …