问题描述

在网页开发中，我们经常需要实现内容的展开/折叠效果，但使用传统的 CSS 过渡方式存在一个限制：无法为 height: auto 的元素添加过渡动画。当我们尝试从固定高度（如 height: 0）过渡到 height: auto 时，元素会直接跳变，没有平滑的动画效果。

GSAP (GreenSock Animation Platform) 是一个功能强大的 JavaScript 动画库，可以轻松创建高性能、流畅的动画效果。 它适用于网页、应用程序和任何可以运行 JavaScript 的环境。

GSAP 官方文档

这个主题切换按钮可以在明/暗模式之间平滑切换，通过 CSS 过渡实现了滑块移动、背景色变化等流畅动画效果，同时支持用户主题偏好记忆功能。

这个搜索框平时显示为一个圆形图标，点击聚焦后会平滑展开为输入框，同时搜索图标也会优雅地消失。

这是一个使用 HTML 和 CSS 实现的动画菜单按钮效果，通过悬停交互将三条横线转变为 "X" 形状，常用于移动端导航菜单的开关按钮。

这是一个使用 SVG 和 CSS 实现的图标线条描边动画效果。 当用户将鼠标悬停在图标上时，图标会以动画方式显示其轮廓线条。