Framer Motion pathLength 属性不工作

Question

我运行今天遇到了 Framer Motion 的一个奇怪问题。

出于某种原因，这个片段（从他们的网站复制粘贴）不起作用，只有不透明度是动画的

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

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

const SVGComponent = props => {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <motion.path
                d="M0 100V0l50 50 50-50v100L75 75l-25 25-25-25z"
                variants={icon}
                initial="hidden"
                animate="visible"
            />
        </svg>
    );
};

export default SVGComponent;

希望大家能帮上忙，先谢谢了！

Answer 1

我怀疑线条没有出现是因为您缺少描边颜色。

您是否还从 CodeSandbox 示例中的 styles.css 文件复制了 CSS？

https://codesandbox.io/s/rutrh?module=/src/Example.tsx&file=/src/styles.css

Framer Motion pathLength 属性不工作

Framer Motion pathLength property not working

reactjs

svg

framer-motion

Framer Motion pathLength 属性 不工作

Framer Motion pathLength property not working

reactjs

svg

framer-motion

Framer Motion pathLength 属性不工作