我想在动画结束时改变描边的颜色答案

【问题标题】：I want to change the color of the stroke when the animation is over我想在动画结束时改变描边的颜色
【发布时间】：2021-05-16 12:29:07
【问题描述】：

我正在使用 react 和 typescript。
动画是使用动作实现的。
我想在动画结束时将笔触的颜色从红色更改为白色。
如何检测动画何时结束？

import * as React from "react";
import { motion } from "framer-motion";

const icon = {
  hidden: {
    opacity: 0,
    pathLength: 0,
    fill: "rgba(255, 255, 255, 0)"
  },
  visible: {
    opacity: 1,
    pathLength: 1,
    fill: "rgba(255, 255, 255, 1)"
  }
};

export const Example = () => (
  <div className="container" style={{ background: "blue" }}>
    <motion.svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      style={{
        stroke: "red",
        strokeWidth: 2,
        strokeLinejoin: "round",
        strokeLinecap: "round"
      }}
    >
      <motion.path
        d="M0 100V0l50 50 50-50v100L75 75l-25 25-25-25z"
        variants={icon}
        initial="hidden"
        animate="visible"
        transition={{
          default: { duration: 2, ease: "easeInOut" },
          fill: { duration: 2, ease: [1, 0, 0.8, 1] }
        }}
      />
    </motion.svg>
  </div>
);

【问题讨论】：

标签： reactjs typescript framer-motion

【解决方案1】：

关注https://www.framer.com/api/motion/component/#visualelementlifecycles.onanimationcomplete 上的 Motion API 文档

您可以使用“onAnimationComplete”回调来检测动画的结束。

【讨论】：