如何用Framer Motion复现YouTube指定时间点的职业信息弹出动画？

核心思路 #

你要的动画是文字与白色遮块配合的联动效果：白色块初始覆盖文字，两者从底部向上移动的同时，白色块逐渐消失，营造出“内容从白色块后弹出”的视觉感。你之前的代码只实现了文字的位移，缺少白色遮块的配合动画。

实现步骤与代码示例 #

1. 基础版本（位移型遮块） #

搭建相对定位容器，内部包含白色遮块和目标文字，遮块用绝对定位覆盖在文字上方：

import { motion } from "framer-motion";

const CareerCard = () => {
  return (
    <div style={{ position: "relative", width: "fit-content" }}>
      {/* 白色遮块 */}
      <motion.div
        initial={{ y: 0, opacity: 1 }}
        animate={{ y: "-100%", opacity: 0 }}
        transition={{ duration: 0.4, ease: "easeOut" }}
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: "white",
          zIndex: 1,
        }}
      />
      {/* 职业文字 */}
      <motion.h4
        initial={{ y: 50 }}
        animate={{ y: 0 }}
        transition={{ duration: 0.4, ease: "easeOut" }}
        style={{ position: "relative", zIndex: 0, margin: 0 }}
      >
        UI/UX Designer
      </motion.h4>
    </div>
  );
};

export default CareerCard;

2. 动画细节说明 #

• 白色遮块：初始完全覆盖文字，动画时向上移出容器并逐渐透明，和文字位移节奏同步
• 文字元素：保留底部向上的位移，通过z-index让它处于遮块下方，等遮块移开后完全显示
• 过渡同步：两个元素用相同的duration和ease参数，保证动画节奏一致

3. 贴近视频的优化版本（收缩型遮块） #

如果想要更贴合视频里的“弹出”质感，可以让遮块从底部向上收缩消失，同时给文字添加轻微延迟：

import { motion } from "framer-motion";

const CareerCard = () => {
  return (
    <div style={{ position: "relative", width: "fit-content", overflow: "hidden" }}>
      <motion.div
        initial={{ scaleY: 1, transformOrigin: "bottom" }}
        animate={{ scaleY: 0 }}
        transition={{ duration: 0.4, ease: "easeOut" }}
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: "white",
          zIndex: 1,
        }}
      />
      <motion.h4
        initial={{ y: 20, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.4, ease: "easeOut", delay: 0.05 }}
        style={{ position: "relative", zIndex: 0, margin: 0 }}
      >
        UI/UX Designer
      </motion.h4>
    </div>
  );
};

export default CareerCard;

内容的提问来源于stack exchange，提问作者flowoverstack