如何使用 react-spring 為 onClick 事件上的文本設置動畫？

Question

所以，我正在使用 NextJs 和 React-spring 制作一個“隨機報價機”（我之前完成的一個 freecodecamp 挑戰，但我只是想嘗試新事物，例如使用 nextjs 和 react-spring 動畫）

所以一切正常，但是當我點擊“新報價”按鈕時，它會生成一個帶有淡入 animation 的新報價，當我點擊按鈕時它不會。 它僅在第一次加載頁面時有效。

有什么解決方法嗎？ 我也使用了 chakraUI，但它沒有各種動畫或過渡。 我的沙盒鏈接： https://codesandbox.io/s/compassionate-heisenberg-byulo?file=/pages/index.js

以下是我到目前為止編寫的代碼：

import * as React from "react";
import { useState, useCallback } from "react";
import {
  ChakraProvider,
  Box,
  Text,
  Button,
  Icon,
  Flex,
  HStack,
  Heading,
  Link
} from "@chakra-ui/react";
import { FaTwitter, FaQuoteLeft } from "react-icons/fa";
import quoteArray from "../pages/day/quotes";
import { useSpring, animated } from "react-spring";

const Title = () => {
  return (
    <Box>
      <Heading mt="1%" align="center">
        Random Quote Generator
      </Heading>
    </Box>
  );
};

const QuoteBox = () => {
  const [loading, setLoading] = useState(true);
  const [quote, setQuote] = useState(null);
  const props = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 }
  });

  const onQuoteChange = useCallback(() => {
    setLoading(true);
    const randomQuote =
      quoteArray[Math.floor(Math.random() * quoteArray.length)];
    setLoading(false);
    setQuote(randomQuote);
  }, []);

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

  return (
    <Box>
      <Title />
      <Box
        width="50%"
        height="100%"
        border="1px"
        boxShadow="md"
        p={5}
        rounded="md"
        bg="white"
        borderColor="gray.400"
        mx="auto"
        my="10%"
      >
        <Box>
          <Flex>
            <Box>
              <Icon as={FaQuoteLeft} w={7} h={6} />
              <animated.div style={props}>
                <Text fontSize="2xl">
                  {loading || !quote ? "..." : quote.quote}
                </Text>
              </animated.div>
            </Box>
          </Flex>
        </Box>
        <Box>
          <animated.div style={props}>
            <Text fontSize="xl" align="right">
              -{loading || !quote ? "..." : quote.author}
            </Text>
          </animated.div>
        </Box>

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

          <Button
            as={Link}
            colorScheme="twitter"
            size="sm"
            leftIcon={<FaTwitter />}
            target="_blank"
            href="https://twitter.com/intent/tweet?text=Hello%20world"
          >
            Twitter
          </Button>
        </HStack>
      </Box>
    </Box>
  );
};

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

export default App;

Answer 1

如果您在每個新報價上使用set方法重置spring配置，則 animation 應該可以工作。

試試這個分叉的沙箱https://codesandbox.io/s/competent-rgb-umgx5?file=/pages/index.js

變化 1

const states = [
  {
    config: { duration: 1250 },
    from: { opacity: 0.2, color: "green" },
    to: { opacity: 0.6, color: "red" }
  },
  {
    config: { duration: 1250 },
    from: { opacity: 0.2, color: "red" },
    to: { opacity: 0.6, color: "green" }
  }
];

更改 2（更改useSpring的用法）

  const [toggle, setToggle] = useState(false);
  const [props, set] = useSpring(() => ({
    ...states[+toggle]
  }));

更改 3（更新 newQuote 回調以調用set ）

    onClick={() => {
      onQuoteChange();
      set({
        ...states[+!toggle]
      });
      setToggle(!toggle);
    }}