用 CSS transform + transition 实现左右滑出动画双栏布局，左栏默认 translateX(0)、右栏初始 translateX(100%)，触发时左栏移至 -100%、右栏移至 0，均需声明 transition: transform 0.3s ease-in-out 于常态样式，并推荐配合 checkbox:checked + 兄弟选择器实现无 JS 控制。
用 CSS transform + transition 实现左右滑出动画
双栏布局加动画，核心不是靠 JS 控制位置，而是用 CSS 的 transform: translateX() 移动元素，配合 transition 做缓动。这样性能好、不触发重排，手机上也流畅。
常见错误是直接改 left 或 margin-left，这会导致浏览器频繁计算布局，动画一卡一卡的；还有人用 display: none 切换，结果根本没“滑出”效果，只是突然消失。
- 左栏默认
transform: translateX(0)，右栏初始设为transform: translateX(100%) - 触发动画时，左栏移出：
transform: translateX(-100%)；右栏同步滑入：transform: translateX(0) - 必须给两个栏都加
transition: transform 0.3s ease-in-out，且不能只写在 hover 或 active 上——要写在常态样式里，否则第一次动画不生效 - 别忘了加
will-change: transform（可选），对 Chrome/Edge 有轻微性能提示作用，但不是必需
如何用 checkbox + :checked 触发滑出（无 JS 方案）
如果你不想写 JS，纯 CSS 控制开关，checkbox 是最稳妥的选择。它天然支持状态切换，配合兄弟选择器就能驱动动画，兼容到 IE9+，比 :hover 更可控。
关键点在于结构顺序和选择器写法：触发按钮必须是 input[type="checkbox"] 的相邻兄弟，目标栏必须是它的后续兄弟或子元素。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- HTML 中把
<input id="toggle">放在最前，然后是按钮<label for="toggle"></label>，再是左栏、右栏 - CSS 里用
#toggle:checked ~ .right-panel { transform: translateX(0); }控制右栏入场 - 左栏要同时响应：
#toggle:checked ~ .left-panel { transform: translateX(-100%); } - 注意：如果右栏不在
input后面的 DOM 流中，用~就选不到，得改结构或换 JS
transform 滑出时内容被裁切？检查 overflow 和父容器
滑出动画看起来“断了一截”，文字或图片边缘被砍掉，大概率是父容器设置了 overflow: hidden，而子元素的 translateX 移出了可视区域边界。
这不是动画本身的问题，而是布局约束冲突。尤其当双栏放在一个固定宽高容器（比如 height: 100vh）里时，容易踩坑。
- 先确认父容器是否真需要
overflow: hidden——多数情况其实不需要，删掉就正常了 - 如果必须保留裁切（比如做全屏幻灯片），那就把动画元素单独提一层 DOM，脱离该容器的
overflow约束 - 不要试图用
overflow: visible强行撑开，它对transform位移无效；clip-path是更现代的替代方案，但 IE 不支持 - 移动端 Safari 对
transform+overflow组合特别敏感，建议加backface-visibility: hidden防闪烁
用 JS 控制时，classList.toggle() 比直接操作 style 更可靠
一旦需要响应按钮点击、路由变化或数据加载完成再触发动画，就得上 JS。但别直接写 element.style.transform = 'translateX(-100%)' ——这样会覆盖 CSS 里定义的 transition，动画直接失效。
正确做法是用类名控制状态，把所有动画逻辑留在 CSS 里，JS 只管开关。
- 定义两个类：
.slide-out-left { transform: translateX(-100%); }和.slide-in-right { transform: translateX(0); } - JS 里统一用
element.classList.toggle('slide-out-left')，而不是拼字符串改 style - 如果要监听动画结束，用
element.addEventListener('transitionend', handler)，但注意它可能触发多次（比如同时改了 color 和 transform），要用e.propertyName === 'transform'过滤 - 避免在动画进行中反复 toggle 类名，会导致状态错乱；加个
isAnimating标志位更安全
真正难的不是写出滑出效果，而是让左右两栏的位移严格同步、不出现毫秒级错帧，以及在 iOS Safari 下不闪、不卡、不意外回弹。这些细节藏在 transform 的硬件加速条件、transition-timing-function 的取值、还有是否触发了层合成里——调的时候多开 DevTools 的 Rendering 面板看 FPS 和层叠图，比猜有用得多。
