2025 OEM 網站開發筆記 [4-1] - shadcn/ui's Accordion with GSAP Expand/Collapse Animation

用 GSAP 撰寫手風琴折疊動畫

Posted by Young on 2025-03-03
Estimated Reading Time 3 Minutes
Words 742 In Total

問題重點

由於專案使用 GSAP 而非 framer motion 導致 shadcn/ui 的 accordion 元件在此專案中是沒有展開/收起動畫的，因此需用 GSAP 自行製作動畫效果

GSAP 動畫建構重點

以下 shadcn/ui 官方的寫法，若專案有 framer motion 應能直接使用

1
2
3
4
5
6
7
8
9
return (
	<Accordion type='single' collapsible className='w-full'>
		<AccordionItem value='item-1'>
			<AccordionTrigger>Is it accessible?</AccordionTrigger>
			<AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
		</AccordionItem>
		...
	</Accordion>
);

經過思考，得出兩個解決方案：

  1. 第一個版本：完全自定義的 Accordion 實現，使用 GSAP 處理所有動畫效果。
  2. 第二個版本：繼續使用 Shadcn UI 的 Accordion 組件，但通過包裝內容元素和使用 GSAP 增強動畫效果。

為了能以最有效率的方式開發此專案，最終選擇了第二個版本

第二個版本

  • 添加了一個包裝 div 並設置 ref，這樣 GSAP 可以直接對其進行動畫處理
  • 使用 onValueChange 事件來觸發 GSAP 動畫
  • 保留了原有的 Shadcn UI 組件結構

程式碼解析：

  • el 是這個 div 元素本身
  • contentRefs.current 是一個物件，它存放了所有 AccordionContent 的 ref
  • 這樣就可以透過 contentRefs.current[service.id] 取得對應的 DOM，用來做動畫。。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
return (
    ...
	<div className='space-y-4'>
		{services.map((service) => (
			<Accordion
                ...
				onValueChange={(value) => {
					handleValueChange(service.id, value === service.id);
				}}
			>
				<AccordionItem value={service.id} className='border-none'>
					<AccordionTrigger className='flex items-center space-x-4 p-4 text-lg font-semibold'>
						<div className='flex items-center gap-4'>
							{service.icon}
							<span>{service.title}</span>
						</div>
					</AccordionTrigger>

					<div
						className='gsap-content-wrapper overflow-hidden'
						ref={(el) => {
							contentRefs.current[service.id] = el;
						}}
					>
						<AccordionContent className='p-4 text-gray-600'>{service.content}</AccordionContent>
					</div>
				</AccordionItem>
			</Accordion>
		))}
	</div>
);

GSAP 動畫程式碼

幾個重點首先是宣告 contentRefs 來存儲每個 AccordionContent 的 DOM 元素，方便 GSAP 控制動畫效果

1
const contentRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});

GSAP 動畫處理函數：

  • 展開 → height: "auto", opacity: 1
  • 收起 → height: 0, opacity: 0
  • 使用 power2.in 緩動函數來改善收起效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 追蹤 accordion 展開狀態的變化
const handleValueChange = (id: string, isOpen: boolean) => {

	const contentElement = contentRefs.current[id];

	if (contentElement) {
		if (isOpen) {
			// 首先設置初始狀態
			gsap.set(contentElement, {
				height: 0,
				opacity: 0,
				y: -10,
				overflow: "hidden",
			});

			// 然後執行展開動畫
			gsap.to(contentElement, {
				height: "auto",
				opacity: 1,
				y: 0,
				duration: 0.3,
				ease: "power2.out",
				onComplete: () => {
					// 動畫完成後移除高度限制
					gsap.set(contentElement, { clearProps: "overflow" });
				},
			});
		} else {
			// 首先獲取當前高度
			const height = contentElement.offsetHeight;

			// 設置明確的高度（而非 auto）
			gsap.set(contentElement, {
				height: height,
				overflow: "hidden",
			});

			// 然後執行收起動畫
			gsap.to(contentElement, {
				height: 0,
				opacity: 0,
				y: -10,
				duration: 0.3,
				ease: "power2.in",
			});
		}
	}
};

成果展示

accordion-animation

若您覺得這篇文章對您有幫助，歡迎分享出去讓更多人看到⊂◉‿◉つ~

留言版

FEATURED TAGS
FRIENDS
ESC