1import { motion } from "motion/react";
2import { useState } from "react";
3
4const tabs = ["首页", "文章", "相册", "关于"];
5
6function TabBar() {
7  const [activeTab, setActiveTab] = useState(0);
8
9  return (
10    <div className="flex gap-2 bg-gray-100 p-2 rounded-lg">
11      {tabs.map((tab, index) => (
12        <button
13          key={tab}
14          onClick={() => setActiveTab(index)}
15          className="relative px-4 py-2 text-sm font-medium transition-colors"
16        >
17          {/* 共享的活动背景 */}
18          {activeTab === index && (
19            <motion.div
20              layoutId="tab-indicator"
21              className="absolute inset-0 bg-white rounded-md shadow"
22              transition={{
23                type: "spring",
24                duration: 0.5,
25                bounce: 0.2,
26              }}
27            />
28          )}
29          <span className="relative z-10">{tab}</span>
30        </button>
31      ))}
32    </div>
33  );
34}

1function TableOfContents({ items }: { items: TocItem[] }) {
2  const [activeId, setActiveId] = useState<string>("");
3
4  return (
5    <div className="space-y-1">
6      {items.map((item) => (
7        <motion.button
8          key={item.id}
9          onClick={() => scrollTo(item.id)}
10          className={cn(
11            "relative w-full text-left px-3 py-2 rounded-lg",
12            activeId === item.id ? "text-white font-medium" : "text-white/70"
13          )}
14        >
15          {/* 共享的高亮背景 */}
16          {activeId === item.id && (
17            <motion.div
18              layoutId="active-toc-background"
19              className="absolute inset-0 bg-white/20 rounded-lg"
20              transition={{
21                type: "spring",
22                duration: 0.38,
23                bounce: 0,
24              }}
25            />
26          )}
27
28          <span className="relative z-10">{item.text}</span>
29
30          {/* 共享的当前章节指示器 */}
31          {activeId === item.id && (
32            <motion.div
33              layoutId="active-toc-indicator"
34              className="relative w-3 h-3"
35              transition={{
36                type: "spring",
37                duration: 0.38,
38                bounce: 0,
39              }}
40            >
41              <div className="w-1.5 h-1.5 rounded-full bg-white" />
42            </motion.div>
43          )}
44        </motion.button>
45      ))}
46    </div>
47  );
48}

1function Gallery() {
2  const [selectedId, setSelectedId] = useState<string | null>(null);
3
4  return (
5    <>
6      {/* 缩略图网格 */}
7      <div className="grid grid-cols-3 gap-4">
8        {images.map((image) => (
9          <motion.div
10            key={image.id}
11            layoutId={`image-${image.id}`}
12            onClick={() => setSelectedId(image.id)}
13            className="aspect-square rounded-lg overflow-hidden cursor-pointer"
14          >
15            <img src={image.thumbnail} alt={image.title} />
16          </motion.div>
17        ))}
18      </div>
19
20      {/* 全屏预览 */}
21      {selectedId && (
22        <>
23          {/* 遮罩层 */}
24          <motion.div
25            initial={{ opacity: 0 }}
26            animate={{ opacity: 1 }}
27            exit={{ opacity: 0 }}
28            className="fixed inset-0 bg-black/80 z-50"
29            onClick={() => setSelectedId(null)}
30          />
31
32          {/* 展开的图片 */}
33          <motion.div
34            layoutId={`image-${selectedId}`}
35            className="fixed inset-0 z-50 flex items-center justify-center p-8"
36          >
37            <img
38              src={images.find((img) => img.id === selectedId)?.full}
39              className="max-w-full max-h-full rounded-lg"
40            />
41          </motion.div>
42        </>
43      )}
44    </>
45  );
46}

1// 快速响应的 UI 元素（如选项卡）
2transition={{
3  type: "spring",
4  duration: 0.5,
5  bounce: 0.2,
6}}
7
8// 平滑无弹跳的过渡（如目录高亮）
9transition={{
10  type: "spring",
11  duration: 0.38,
12  bounce: 0,
13}}
14
15// 缓慢优雅的动画（如模态框）
16transition={{
17  type: "spring",
18  duration: 0.8,
19  bounce: 0.15,
20}}

1<motion.button className="relative">
2  {/* 背景层 */}
3  {isActive && (
4    <motion.div
5      layoutId="background"
6      className="absolute inset-0 bg-blue-500"
7    />
8  )}
9
10  {/* 内容层 - 使用 relative z-10 确保在上层 */}
11  <span className="relative z-10">按钮文字</span>
12</motion.button>

1import { AnimatePresence } from "motion/react";
2
3<AnimatePresence>
4  {isOpen && (
5    <motion.div
6      layoutId="modal"
7      initial={{ opacity: 0 }}
8      animate={{ opacity: 1 }}
9      exit={{ opacity: 0 }}
10    >
11      模态框内容
12    </motion.div>
13  )}
14</AnimatePresence>;

1import { forwardRef } from "react";
2import { AnimatePresence, motion } from "motion/react";
3
4type Item = { id: string; title: string };
5
6const ItemRow = forwardRef<HTMLLIElement, { item: Item }>(function ItemRow(
7  { item },
8  ref
9) {
10  return (
11    <motion.li ref={ref} layout exit={{ opacity: 0 }}>
12      {item.title}
13    </motion.li>
14  );
15});
16
17<AnimatePresence mode="popLayout">
18  {items.map((item) => (
19    <ItemRow key={item.id} item={item} />
20  ))}
21</AnimatePresence>;