CSS transition实现盒子右滑失效 仅背景色过渡生效原因求解

根本原理 #

CSS transition 要实现平滑过渡，必须满足一个核心前提：过渡属性的起始值和结束值都必须是浏览器可直接计算的明确值，二者可以做数值插值计算。你的代码刚好不符合这个前提：

• 初始状态下#box的right属性设置为auto，对于绝对定位元素来说，auto属于模糊值，它的实际渲染位置由元素初始位置、left属性值、自身宽度、父容器宽度共同决定，浏览器不会将其自动转换为具体的像素数值，无法作为过渡的起始计算值
• 触发active状态后right被设置为明确的0，浏览器无法在auto和0两个值之间计算出过渡过程的中间帧，因此会直接跳变到最终位置，不会产生平滑滑动效果
• 背景色可以正常过渡，是因为初始值red和触发后的green都是明确的颜色值，符合插值计算的要求

快速修复建议 #

把初始状态的right: auto替换为明确的计算值即可，比如你要实现从最左侧滑动到最右侧，可以把初始right设置为calc(100% - 150px)，或者改用left属性控制：初始设置left: 0，触发active时设置left: calc(100% - 150px)，就能实现平滑滑动效果。

内容的提问来源于stack exchange，提问作者user15573857