0

我今天遇到了 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;

希望各位大侠能帮帮忙，先谢谢了！

4

1 回答 1

1

我怀疑这条线没有出现，因为您缺少笔画颜色。

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

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

于 2020-07-08T11:12:49.403 回答