在VibeKnow中为流程卡片添加展开动画需结合CSS过渡与JS状态控制：HTML用data-vibe-collapse标记状态，CSS用max-height过渡替代height，JS监听点击切换data属性值以触发动画。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在VibeKnow中为流程卡片添加展开动画，能让用户点击后看到内容平滑展开而非突兀显示，提升交互质感。实现该效果需结合CSS过渡属性与JavaScript状态控制，不依赖第三方动画库。
准备基础HTML结构
先确保流程卡片容器具备可展开的语义结构：外层是触发区域（如标题行），内部是折叠内容区，用data属性标记初始状态。
在卡片根元素上添加 【data-vibe-collapse="closed"】 属性，这是后续JS判断和CSS选择器的关键依据，漏写会导致动画逻辑失效。
内容区需设置固定高度为0、溢出隐藏，并添加过渡类名，例如：class="collapse-content transition-height"。
定义CSS展开过渡样式
使用max-height替代height做过渡，避免无法获取真实高度的问题。将过渡目标设为足够大的值（如999px），确保所有可能内容都能完整展开。
给 .transition-height 类添加：transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;。
为展开态单独定义CSS规则：[data-vibe-collapse="open"] .collapse-content { max-height: 999px; opacity: 1; }。注意这里不能用height: auto，它无法参与CSS过渡。
用JavaScript绑定点击与状态切换
方法一：原生事件监听（推荐）
第一步：用 document.querySelectorAll('.vibe-card-trigger') 获取所有卡片触发器节点。
第二步：对每个触发器绑定 click 事件，读取其父卡片的 dataset.vibeCollapse 值。
第三步：根据当前状态翻转 data-vibe-collapse 值，并同步更新DOM——这一步必须在状态变更后立即执行，否则CSS选择器无法响应。
方法二：事件委托（适合动态插入的卡片）
在卡片容器（如 .vibe-flow-container）上监听 click，用 event.target.closest('.vibe-card-trigger') 判断是否点击了有效触发器，再执行状态切换逻辑。
注意：不要在切换状态后加 setTimeout 延迟操作，CSS过渡依赖DOM重绘时机，人为延迟会破坏动画连贯性。
