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

Question

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

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

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;

Answer 1

如果您只想重新挂载元素，请key在其上使用 prop，如下所示：

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

Codesandbox（今后请提供Codesandbox复制品）

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

为了使动画更流畅，我可能会使用动画控件AnimatePresence。