本文介绍如何使用 JavaScript 类名切换配合 CSS transform: scaleY() 实现 div 元素的平滑垂直展开/收起效果，解决 SVG 容器内元素动态显示与隐藏的问题。
本文介绍如何使用 javascript 类名切换配合 css `transform: scaley()` 实现 div 元素的平滑垂直展开/收起效果，解决 svg 容器内元素动态显示与隐藏的问题。
在 Web 开发中，实现点击展开/收起交互时，直接操作内联样式（如 element.style.transform）虽可行，但易导致样式耦合、难以维护，且不利于动画过渡控制。推荐做法是通过添加/移除 CSS 类来驱动状态变化——这既符合关注点分离原则，又能充分利用 CSS 的性能优势（尤其是硬件加速的 transform 属性）。
✅ 正确实现方式：类名切换 + CSS 过渡
首先，在 JavaScript 中监听点击事件，并对目标元素（.bar）的 classList 使用 toggle() 方法：
document.getElementById('divItem').addEventListener('click', () => {
document.querySelector('.bar').classList.toggle('expanded');
});
该代码会在每次点击时自动切换 .bar 元素是否拥有 expanded 类——无需手动判断当前状态，简洁可靠。
接着，在 CSS 中定义基础样式与展开态样式，并加入 transition 以实现平滑动画：
.bar {
transform-origin: top center; /* 关键：确保缩放围绕顶部中心进行，实现“向下展开”效果 */
transition: transform 0.3s ease-in-out; /* 推荐添加过渡，提升用户体验 */
}
.bar.expanded {
transform: scaleY(3); /* 原始高度 ×3，等效于向下延伸约200%（可根据实际需求调整） */
}
? 注意 transform-origin：默认缩放中心为元素中心点，会导致矩形上下同时拉伸。设置为 top center 后，缩放将从顶部锚定，视觉上表现为“向下展开”，完美契合需求中的“扩展 downward on the Y axis”。
? 补充：控制 .circle 的显隐逻辑
由于 .circle 需随 .bar 展开而显示，建议不依赖 visibility: hidden（不可见但仍占位），而是结合 opacity 与 transform 或使用 display 控制布局流。更推荐的方式是利用父子关系或相邻选择器联动：
/* 方案一：CSS 控制（推荐） */
.bar:not(.expanded) + .circle {
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.bar.expanded + .circle {
opacity: 1;
pointer-events: auto;
}
同时确保 HTML 结构中 .circle 紧跟 .bar（如示例中所示），即可实现样式级联动，无需额外 JS 操作。
⚠️ 注意事项与最佳实践
- 避免 scaleY() 引起内容挤压：若 .bar 内含 SVG 或文本，scaleY 可能导致内容纵向拉伸失真。此时应优先考虑 max-height + overflow: hidden 的方案，或仅对容器本身应用 transform，保持内部元素独立缩放。
- 双击 vs 单击：原问题提到“double click”，但示例代码使用 click。如需严格双击，请改用 'dblclick' 事件，但需注意移动端兼容性差（多数设备无双击概念），生产环境建议统一使用单击触发。
-
可访问性增强：为 #divItem 添加 role="button" 和 tabindex="0"，并监听 Enter/Space 键，确保键盘用户可用：
const divItem = document.getElementById('divItem'); divItem.setAttribute('role', 'button'); divItem.setAttribute('tabindex', '0'); divItem.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); document.querySelector('.bar').classList.toggle('expanded'); } });
✅ 总结
通过 element.classList.toggle() 切换状态类，再由 CSS 定义对应视觉表现，是实现 DOM 动态交互的现代、健壮且可维护的标准模式。配合 transform-origin 和 transition，不仅能精准实现“向下展开”的 SVG 容器动效，还能兼顾性能、可访问性与响应式适配。摒弃内联样式硬编码，拥抱声明式样式控制，是构建高质量前端交互的关键一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
