如何使用成帧器运动对每个状态变化进行动画处理

我认为渲染成帧器运动可以重做我的动画，因为初始设置为隐藏，动画设置为显示。但这种情况并非如此。

我怎样才能让它在每次状态变化时重新播放动画？

import React, { useEffect, useState } from "react";
import { motion} from "framer-motion";
import styled from "styled-components";

const Screen = () => {
  const [state, setState] = useState(1);

  useEffect(() => {
    setInterval(() => {
      setState(Math.random());
    }, 4000);
  }, []);

  return (
    <Title variants={variants} animate="show" initial="hide">
      {console.log("re-render")}
      {`screen ${state}`}
    </Title>
  );
};

const Title = styled(motion.div)`
  color: red;
`;

export const variants = {
  show: {
    opacity: 1,
    y: 0,
    transition: {
      ease: "easeOut",
      duration: 0.3
    }
  },
  hide: {
    y: -20,
    opacity: 0
  }
};

export default Screen;

如果您只想重新安装元素，请使用key支撑它，就像这样：

  return (
    <motion.div key={state} variants={variants} animate={'show'} initial="hide">
      {`screen ${state}`}
    </motion.div>
  );

代码沙盒 https://codesandbox.io/s/https-stackoverflow-com-questions-69051279-76yit（以后复制请提供Codesandbox）

它看起来很奇怪，但如果这是你想要的效果，它就可以工作。

为了更流畅的动画，我会使用动画控件或AnimatePresence大概。