不能只靠 display: none 或 remove()，必须标记状态+过渡属性+重排控制；因 display 是离散属性，无法过渡，应组合 opacity 和 transform: translatex() 实现右飘渐隐，删除前需加类、强制重绘、监听 transitionend 后移除。
用 CSS transition 实现列表项右飘+渐隐删除动画
直接说结论：不能只靠 display: none 或 remove()，必须配合状态标记 + 过渡属性 + 重排时机控制。否则元素一删就立刻消失，动画根本没机会触发。
为什么 transition 对 display 无效
display 是离散属性（block/none 之间无中间值），浏览器不支持对其做过渡。常见错误是写：transition: display 0.3s ease —— 这行代码完全没效果。
- 真正能过渡的属性只有：
opacity、transform、max-height（需设初始值）、margin等连续可插值的属性 - 动画要“右飘+渐隐”，最优解是组合
opacity和transform: translateX() - 必须在 DOM 元素被移除前，先加一个“待删除”类，触发重绘，再等过渡结束才调用
remove()
React/Vanilla JS 中删除前的三步操作顺序
无论用什么框架，DOM 删除动画的核心逻辑一致：标记 → 触发重绘 → 延迟移除。顺序错一步，动画就掉帧或直接失效。
- 给要删的
<li>加上类名，比如is-leaving - 立即强制重绘（防止浏览器把 class 添加和 remove 合并优化）：
element.offsetHeight（读布局）或getComputedStyle(element).opacity - 监听
transitionend事件，在回调里调用element.remove()；或者用setTimeout定时（不推荐，精度低）
示例关键 CSS：
li.is-leaving {
opacity: 0;
transform: translateX(100px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
Vue 中用 <transition></transition> 的坑与绕过点
Vue 的 <transition></transition> 默认只处理进入/离开的 class 切换，但它的 leave-to 类不会自动加在元素上——得手动确保 leave 阶段的样式已生效，且不能依赖 v-if 瞬间销毁。
- 别用
v-if直接控制列表项显隐，改用v-show+ 数据标记（如item.isDeleted = true），再用filter渲染 -
<transition></transition>的name必须和 CSS 类前缀一致，比如name="slide"就要写.slide-leave-to - 如果列表用
v-for且 key 不稳定（比如用 index），删除时会复用 DOM 节点，导致动画错乱——key 必须是唯一、稳定标识（如item.id）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
