CSS Transition实现从右到左过渡，替代默认从左到右效果

嘿，我来帮你搞定这个从右到左的过渡显示效果！你现在的问题在于常规的width从0到指定值是从左往右展开，因为元素默认是左对齐定位的，咱们只需要调整一下定位逻辑和过渡属性就能实现反向展开。

问题分析 #

你的.slice-mid用了visibility:hidden，这个属性是无法实现平滑过渡的（会瞬间显示/隐藏），而且初始定位没有固定右侧边缘，所以展开方向是默认的从左到右。咱们需要调整这两个核心点：

解决方案步骤 #

1. 给父元素添加相对定位：因为.slice-mid是绝对定位，父元素.box必须设置position:relative，否则子元素会相对于整个文档定位，而不是你的目标盒子。
2. 固定子元素的右边缘：把.slice-mid的right:0设置好，这样它的右边缘和父盒子对齐，宽度增加时会自然向左扩展。
3. 替换visibility为可过渡的属性：用width:0实现初始隐藏，配合transition实现平滑过渡，也可以结合opacity优化视觉效果。
4. 添加过渡属性：指定width的过渡时长和缓动函数，让展开过程更自然。

修改后的完整代码示例 #

.box {
  display: block;
  margin: 3em;
  width: 360px;
  height: 420px;
  border: 1px solid #333;
  text-align: center;
  position: relative; /* 关键：让子元素的absolute定位基于此 */
}

.slice-mid {
  position: absolute;
  margin: 0;
  top: 370px;
  right: 0; /* 固定右边缘，实现从右往左展开 */
  width: 0;
  height: 140px;
  background-color: white;
  z-index: 2;
  transition: width 0.5s ease; /* 宽度过渡，0.5秒完成，带缓动效果 */
}

/* 触发展开的条件，比如hover盒子时 */
.box:hover .slice-mid {
  width: 360px; /* 和父盒子宽度一致，完全展开 */
}

进阶优化（带淡入效果） #

如果想要更流畅的视觉体验，可以结合opacity，让元素在宽度展开得差不多时再淡入，避免初始阶段的突兀感：

.slice-mid {
  /* 保留其他属性 */
  opacity: 0;
  /* width过渡0.5秒，opacity延迟0.4秒再过渡0.1秒 */
  transition: width 0.5s ease, opacity 0.1s ease 0.4s;
}

.box:hover .slice-mid {
  width: 360px;
  opacity: 1;
}

这样调整后，当你hover盒子时，.slice-mid就会从右到左平滑展开啦！

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