NextJs 和 Framer Motion AnimateSharedLayout 的问题

问题描述

我有以下组件，想给它添加一点悬停动画。悬停本身工作正常，一切都在适当的位置。但是除了我在 CSS 中设置的过渡之外，我没有任何过渡

svg 应该随着 h5 平滑向上移动，按钮应该延迟显示，并带有 y 偏移和不透明度。

import Link from "next/link";
import Tilt from "react-parallax-tilt";
import styles from "../styles/Home.module.css";
import { motion,AnimateSharedLayout } from "framer-motion";

const Sec4Card = ({ link,title,svg,text }) => {
  return (
    <Link href={link}>
      <a>
        <Tilt
          className={styles.Tilt}
          glareEnable={true}
          scale={1}
          tiltMaxAngleX={0}
          tiltMaxAngleY={0}
          glareMaxOpacity={0.1}
        >
          <CardContainer title={title} svg={svg} text={text} />
        </Tilt>
      </a>
    </Link>
  );
};

function CardContainer({ title,text }) {
  const [isExpanded,setIsExpanded] = useState(false);

  const collapse = () => {
    setIsExpanded(false);
  };

  const expand = () => {
    setIsExpanded(true);
  };

  return (
    <div className="card-container">
      <AnimateSharedLayout>
        {isExpanded ? (
          <motion.div
            className={styles.Card}
            onHoverEnd={collapse}
            layoutId="expandable-card"
            transition={{ duration: 0.3 }}
          >
            {svg}
            <motion.h5>{title}</motion.h5>

            <motion.p transition={{ delay: 0.3 }}>{text}</motion.p>
            <motion.button
              className="inactiveButton smallButton"
              transition={{ delay: 0.3 }}
            >
              Mehr erfahren.
            </motion.button>
          </motion.div>
        ) : (
          <motion.div
            className={styles.Card}
            onHoverStart={expand}
            layoutId="expandable-card"
            transition={{ duration: 0.3 }}
          >
            {svg}
            <motion.h5>{title}</motion.h5>
          </motion.div>
        )}
      </AnimateSharedLayout>
    </div>
  );
}

export default Sec4Card;

SVG 的颜色动画是在 CSS 中设置的，因为我将它们作为带 babel 的内联 SVG 导入，并且无法访问成帧器运动 (motion.path) 内的路径

我的 CSS（与我的问题无关）

.index4 {
  background: var(--Med);
  width: 100%;
  min-height: 100vh;
  .head {
    pointer-events: none;
    position: absolute;
    padding: 5% 0;
    display: flex;
    flex-direction: column;
    width: 95%;
    text-align: center;
  }
  .gridContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(0px,1fr));
  }
  .Card {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20vh 3vw 10vh 3vw;
    h5 {
      font-size: 3rem;
      text-align: center;
      color: var(--Dark);
    }
    path,rect {
      fill: var(--Dark);
    }
    p {
      color: var(--Light);
      font-size: 1.6rem;
      line-height: 200%;
    }
  }
  .Card:hover {
    background: var(--Dark);
    transition: background 1s;
    path,rect {
      fill: var(--MainBlue);
      transition: fill 1s,transform 1s;
    }
    h5 {
      color: var(--MainBlue);
      transition: color 1s;
    }
  }
}

家长：

import styles from "../styles/Home.module.css";
import Sec4Card from "./Sec4Card";
import { WorkflowResearch } from "../public/workflow/Workflow_Research.svg";

const IndexSection4 = () => {
  return (
    <div className={styles.index4}>
      <div className={styles.head}>
        <h3>WORKFLOW</h3>
      </div>

      <div className={styles.gridContainer}>
        <Sec4Card
          link="#"
          title="Analyse"
          svg={<WorkflowResearch />}
          text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere ab
              sed minima repellat ullam similique unde deserunt culpa accusamus
              neque."
        />
      </div>
    </div>
  );
};

export default IndexSection4;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）