时间戳

首页 > 解决方案 > 如何使用成帧器运动对每个状态变化进行动画处理

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

问题描述

我认为曾经渲染帧运动会重新制作我的动画，因为初始设置为隐藏并且动画设置为显示。但这种情况并非如此。

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

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;

标签： reactjsframer-motion

解决方案

如果您只想重新安装元素，请key在其上使用道具，如下所示：

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

Codesandbox（请提供 Codesandbox 以供日后复制）

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

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

推荐阅读