transition 对 list-item 删除无效是因为 remove() 是结构性 dom 操作，不触发可动画的 css 属性变化；需用 transform + max-height + opacity 配合类切换与 transitionend 监听实现视觉位移效果。
transition 为什么对 list-item 删除没位移效果
直接给 li 加 transition: all 0.3s 然后调用 remove()，元素会“瞬移消失”，根本看不到周围项的平滑填补空缺——因为 transition 不作用于 DOM 移除本身，也不自动补间布局位置变化。浏览器只对「属性值变化」做插值，而 remove() 是结构性操作，不触发任何可动画 CSS 属性变更。
用 transform + max-height 实现视觉位移感
真正能模拟“邻项上浮填补”错觉的，是让被删项先收缩+淡出，再移除，同时确保其他项在文档流中自然重排。关键不是让它们“动”，而是让删除过程不打断重排节奏：
-
max-height设为略大于最大内容高度（如120px），初始态和.removing态都声明overflow: hidden和transition: max-height 0.25s ease-out, opacity 0.25s ease-out - 删除前加类：
itemEl.classList.add('removing')；不要直接itemEl.remove() - 监听
transitionend时严格校验e.propertyName === 'max-height'，再执行itemEl.remove() - 避免给父容器设
display: flex或grid：弹性布局下，其他项的“上浮”可能被压缩或错位，改用display: block更稳
View Transitions API 的位移补间真能自动对齐吗
能，但只在 Chromium 111+（Chrome/Edge/Opera）里可靠。它不是靠 CSS 动画，而是浏览器在 document.startViewTransition() 包裹的 DOM 更新前后自动捕获快照、计算每个元素的 layout 坐标差并生成位移补间：
- 必须为每个参与过渡的
li设置唯一且稳定的data-view-transition-name="item-42"，删掉后新 DOM 里不能再出现同名值 - 不能在
DOMContentLoaded里调用，得在用户点击或requestAnimationFrame微任务中触发 - 父容器禁用
transform、position: absolute，否则坐标匹配失败，位移会乱飞 - Firefox/Safari 完全不支持，必须降级到
max-height方案，且不能只靠 UA 判断——要用if ('startViewTransition' in document)运行时检测
侧滑删除时如何避免位移错乱
侧滑菜单（如向左滑出删除按钮）本身不引发列表项位移，但若设计成“滑动后内容层缩进、露出按钮”，就容易干扰邻项重排。正确做法是让内容区域自身位移，不改变文档流：
- 内容容器（文字层）用
transform: translateX(-60px)，别碰margin-left或left - 父
li必须设overflow: hidden，否则按钮滑出后会撑破边界、顶开下面的项 - 侧滑过程中禁止
touchmove触发页面滚动：event.preventDefault()要在绑定时加，且仅对横向滑动生效 - 滑动结束需做阈值判断（如位移 > 80px 才提交删除），否则松手瞬间卡在半途，邻项会“悬停”在错误位置
最易被忽略的一点：所有方案都依赖「删除动作与 DOM 重排节奏同步」。任何在动画中途强制读取 getBoundingClientRect()、或插入 display: none、或在 React/Vue 中未管理中间状态，都会让位移中断或跳变。位移不是 CSS 写出来的，是浏览器根据你留出的渲染窗口自然完成的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
