如何在 React 中淡出和淡入？

Question

所以，我完成了 FCC 的項目“隨機報價機”，我完成了所有基本要求，例如更改報價、顏色和推特報價。 但有一件事我不能做，那就是引號的淡入淡出 animation，例如： https://codepen.io/freeCodeCamp/pen/qRZeGZ

在上面的鏈接中，animation 已經由 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 () => {
    const nextColor = getRandomColor();
    setLoading(true);
    const randomQuote =
      quoteArray[Math.floor(Math.random() * quoteArray.length)];
    setTimeout(() => {
      setLoading(false);
      setColor(nextColor);
      setQuote(randomQuote);
    }, 500);
  }, []);

  React.useEffect(() => {
    onQuoteChange();
  }, [onQuoteChange]);

  var randomTweet = (quote) => {
    if (!quote) {
      return null;
    }

    const link = `https://twitter.com/intent/tweet?text="${quote.quote}"%20-${quote.author}`;
    return link;
  };

  return (
    <Box
      bg={color}
      h="100%"
      display="flex"
      flexDir="column"
      justifyContent="center"
    >
      <Box
        width="60%"
        border="1px"
        boxShadow="md"
        p={5}
        rounded="md"
        bg="white"
        borderColor="gray.400"
        mx="auto"
      >
        <Box>
          <Flex>
            <Box>
              <Icon as={FaQuoteLeft} w={7} h={6} color={color} />
              <Text fontSize="2xl" color={color} pl={8} mt="-20px">
                {loading || !quote ? "..." : quote.quote}
              </Text>
            </Box>
          </Flex>
        </Box>
        <Box>
          <Text fontSize="xl" align="right" color={color}>
            -{loading || !quote ? "..." : quote.author}
          </Text>
        </Box>

        <HStack mt="2%" ml="1%" spacing="2%">
          <Button color={color} size="sm" onClick={onQuoteChange}>
            New Quote
          </Button>

          <Button
            as={Link}
            color={color}
            size="sm"
            leftIcon={<FaTwitter />}
            target="_blank"
            href={randomTweet(quote)}
          >
            Tweet now!
          </Button>
        </HStack>
      </Box>
    </Box>
  );
};

function App() {
  return (
    <ChakraProvider>
      <QuoteBox />
    </ChakraProvider>
  );
}

export default App;

animation怎么辦？

Answer 1

工作演示

將transition="0.8s linear"屬性添加到根元素（框）以使顏色過渡更平滑。

  <Box
      bg={color}
      h="100%"
      display="flex"
      flexDir="column"
      justifyContent="center"
      transition="0.8s linear">
   </Box>

根據不透明度添加顯示和隱藏類名 state className={ opacity? "show": "hide"} className={ opacity? "show": "hide"} 。

  <Box 
      className={ opacity ? "show" : "hide"}
      >
      <Flex>
        <Box>
          <Icon as={FaQuoteLeft} w={7} h={6} color={color} />
          <Text fontSize="2xl" color={color} pl={8} mt="-20px">
          -{quote.quote}
          </Text>
        </Box>
      </Flex>
    </Box>
    <Box>
      <Text   className={ opacity ? "show" : "hide"} fontSize="xl" align="right" color={color}>
        -{quote.author}
      </Text>
    </Box>

添加下面給出的 styles 以根據不透明度 state 應用 animation：

.hide {
  -webkit-animation: fadeinout .3s linear forwards;
  animation: fadeinout .3s linear forwards;
}

@-webkit-keyframes fadeinout {
  0% { opacity: 0.6; }
  50% { opacity: 0.2; }
  100% { opacity: 0; }
}

@keyframes fadeinout {
  0% { opacity: 0.6; }
  50% { opacity: 0.2; }
  100% { opacity: 0; }
}

.show {
  -webkit-animation: display .5s linear forwards;
  animation: display .5s linear forwards;
}


@-webkit-keyframes display {
  0% { opacity: 0.2; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

@keyframes display {
  0% { opacity: 0.2; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

您還可以根據您的要求調整過渡時間。