如何在 React 中淡出和淡入？答案

【问题标题】：How to fade-out and fade-in in React?如何在 React 中淡出和淡入？
【发布时间】：2021-04-20 05:16:48
【问题描述】：

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

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

如果你想分叉，这是我的代码框：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;

动画怎么做？

【问题讨论】：

对 React 组件的安装/卸载进行动画处理的最简单方法是使用动画库，例如 React Transition Group：reactcommunity.org/react-transition-group 或 Framer Motion：framer.com/api/motion。
这些库上有很多东西。我应该为这个特定的动画尝试任何具体的事情吗？ @KyleLambert
我确信快速阅读文档将回答您的所有问题。 Youtube 上还有许多分步视频，涵盖了这些库以及如何在安装和卸载时为 react 组件设置动画

标签： javascript css reactjs animation css-transitions

【解决方案1】：

Working demo

将transition="0.8s linear"属性添加到根元素（框）中，使颜色过渡更平滑。

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

添加基于不透明状态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>

添加以下样式以根据不透明度状态应用动画：

.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; }
}

您还可以根据自己的要求调整过渡时间。

【讨论】：