交错儿童框架运动

Question

我试图交错详细信息项目，但父变量似乎在这里不起作用我尝试编辑延迟时间 并尝试更改退出或初始变体似乎没有任何效果，尝试添加 div 作为父级

尝试将变体移至内部 div

但是当我以某种方式编辑动画以显示它是否对儿童有效时，它似乎起作用了，所以我认为问题出在时间上

 或者我在这里缺少什么？ 预先感谢

import { useState } from "react";
import CarouselP1 from "../carousel/carouselP1";
import { MdKeyboardDoubleArrowDown } from "react-icons/md";
import { MdKeyboardDoubleArrowUp } from "react-icons/md";
import { motion, AnimatePresence } from "framer-motion";

const ProjectCard1 = ({ images }) => {
  const [expanded, setExpanded] = useState(false);

  const handleExpand = () => {
    setExpanded(!expanded);
  };

  const details = [
    {
      text: "afafcacascasc",
    },
    {
      text: "adasdascasc",
    },
    {
      text: "afafcacawfgwefaEDFAscasc",
    },
    {
      text: "afafcaE5TWERWEcascasc",
    },
    {
      text: "DFWEQFEAFA",
    },
    {
      text: "HRTHDGDRG",
    },
  ];
  const menuVars = {
    initial: {
      height: 0,
    },
    animate: {
      height: "15rem",
      transition: {
        duration: 0.5,
      },
    },
    exit: {
      height: 0,
      transition: {
        duration: 0.5,
      },
    },
  };

  const parentVars = {
    initial: {
      transition: {
        staggerChildren: 0.2,
        staggerDirection: -1,
      },
    },
    open: {
     
      transition: {
        delayChildren: 0.3,
        staggerChildren: 0.2,
        staggerDirection: 1,
      },
    },
  };

  const childVars = {
    initial: {
      y: "30vh",
      transition: {
        duration: 0.5,
      },
    },
    open: {
      y: 0,
      transition: {
        duration: 0.7,
      },
    },
  };

  return (
    <div className="flex items-center justify-center flex-col space-y-3">
      <CarouselP1 images={images} />
      <div className=" flex flex-col items-center justify-center w-96 max-w-80">
        <p className=" ">WEGdrfbxcvb</p>
      </div>
      <button
        className="flex items-center justify-center cursor-pointer"
        onClick={handleExpand}
      >
        <span className="pr-2">Details</span>
        {expanded ? (
          <MdKeyboardDoubleArrowUp className="mt-1" />
        ) : (
          <MdKeyboardDoubleArrowDown className="mt-1" />
        )}
      </button>
      <AnimatePresence>
        {expanded && (
          <motion.div
            variants={menuVars}
            initial="initial"
            animate="animate"
            exit="exit"
            className="flex rounded-lg items-center h-[15rem] justify-center w-48 bg-sky-200 my-2 origin-top"
          >
              <motion.div
                className="flex flex-col items-center justify-center h-full"
                variants={parentVars}
                initial="initial"
                animate="open"
                exit="initial"
              >
                {details.map((item, index) => {
                  return (
                    <div className="overflow-hidden">
                      <motion.div
                       key={index}
                        variants={childVars}
                        initial="initial"
                        animate="open"
                      >
                        {item.text}
                      </motion.div>
                    </div>
                  );
                })}
              </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      <button className="w-18 h-10 p-2 bg-sky-400 rounded-lg">
        <a href="">Source Code</a>
      </button>
    </div>
  );
};

export default ProjectCard1;

Answer 1

从子 div 中删除

initial

和

animate

道具。 成帧器运动文档显示孩子们没有这些道具，但他们没有告诉你原因。我的猜测是它们会覆盖动画变体过渡。

animate

和

initial

道具将传播给孩子们，所以这也可能是原因。这是一个工作示例。