React Text Fade In on State Change - 对象

Question

我想在 React 中为一些文本设置动画，基于商店中值的更改淡出和淡入文本对象。我在想像 useEffect 这样依赖于所述商店的东西可以解决这个问题，但我不知道如何去实现它。

我想要动画的值是下面代码中的{selection.price.toFixed(2)}。每当markets 更改时，我希望新文本在状态更改期间淡出并在短时间内突出显示：

export const MatchPrices = () => {
  const markets = useStore($markets);

  const updateNotificationRef = useRef();

  useEffect(() => {
 
    if (markets.length === 0) {
      return;
    }

    updateNotificationRef.current.animate(
      {
        opacity: [0, 1, 0],
      },
      1000
    );
  }, [markets]);

  return (
    <Card className="price-display">
      <Table className="card-table prices-table" size="sm">
        <thead className="card-header">
          <tr>
            <th>Home</th>
            <th>Draw</th>
            <th>Away</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            {markets.length !== 0 ? (
              markets
                .filter((market) => market.mt === "MATCH_WINNER")[0]
                .selections.map((selection) => (
                  <td
                    className="match-price"
                    key={selection.id}
                    ref={updateNotificationRef}
                    style={{ opacity: 1 }}
                  >
                    {selection.price.toFixed(2)}
                  </td>
                ))
            ) : (
              <td>
                <Spinner
                  animation="border"
                  role="status"
                  style={{
                    marginLeft: "Auto",
                    marginRight: "Auto",
                  }}
                ></Spinner>
              </td>
            )}
          </tr>
        </tbody>
      </Table>
    </Card>
  );
};

我不太确定如何让 CSS 工作。

Answer 1

一个使用网络动画的例子：

import { useEffect, useRef, useState } from "react";
import "./styles.css";

export default function App() {
  const initialState = 0;
  const [count, setCount] = useState(initialState);
  const updateNotificationRef = useRef();

  useEffect(() => {
    // Skipping the initial render. TODO: use a better solution from https://stackoverflow.com/questions/53179075/with-useeffect-how-can-i-skip-applying-an-effect-upon-the-initial-render
    if (count === initialState) {
      return;
    }
    updateNotificationRef.current.animate(
      {
        opacity: [0, 1, 0]
      },
      500
    );
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount((c) => c + 1)} children="Increment" />
      <div ref={updateNotificationRef} style={{ opacity: 0 }}>
        Updated
      </div>
    </div>
  );
}

现场演示：codesandbox.io