如何实现数字Transform转换时保持原位置不居中？

要实现数字"1"到"0"的原地切换，核心是让两个数字元素始终重叠在同一位置，通过透明度切换完成动画，避免元素位移。

实现步骤 #

• 用相对定位的容器包裹两个数字，作为定位基准
• 两个数字设置绝对定位，让它们完全重合在容器内
• 通过opacity属性配合过渡动画实现平滑切换

示例代码 #

<!-- HTML结构 -->
<div class="number-switcher">
  <span class="digit digit-1">1</span>
  <span class="digit digit-0">0</span>
</div>

/* CSS样式 */
.number-switcher {
  position: relative;
  /* 调整尺寸匹配你的数字大小 */
  width: 30px;
  height: 40px;
}

.digit {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 32px;
  font-weight: bold;
  transition: opacity 0.2s ease-in-out;
}

/* 默认显示1，隐藏0 */
.digit-0 {
  opacity: 0;
}

/* 切换状态：显示0，隐藏1 */
.number-switcher.to-zero .digit-1 {
  opacity: 0;
}
.number-switcher.to-zero .digit-0 {
  opacity: 1;
}

关键说明 #

• 父容器的position: relative是关键，它会让子元素的绝对定位基于容器而非整个视口，避免切换时元素跑到屏幕中心
• 不要用display: none切换，会导致布局重排；用opacity或visibility能保证元素占位不变，位置完全固定

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