滑块组件Transition过渡效果不一致，请求调整为统一从右向左滑动

问题描述 #

我实现了一个滑块标签效果，期望所有滑块标签均从右侧盒子向左滑动，但前三个标签的transition过渡效果与最后一个不一致。希望所有标签的过渡效果都与最后一个标签一致，请问我的transition设置是否存在问题？

现有代码 #

CSS代码

#slider label{ position: relative; transition: all 0.6s ease; }
#s1:checked ~ #slide1{ position: relative; border-radius: 10px; width: 250px; height: 350px; top: -30%; left: 20vh; box-shadow: 0 3px 7px -1px #000; }
#s1:checked ~ #slide2{ position: relative; border-radius: 10px; width: 200px; height: 300px; top: -45vh; left: 60vh; box-shadow: 0 3px 7px -1px #000; }
#s1:checked ~ #slide3, #s1:checked ~ #slide4, #s2:checked ~ #slide1, #s2:checked ~ #slide4, #s3:checked ~ #slide2, #s3:checked ~ #slide1, #s4:checked ~ #slide2, #s4:checked ~ #slide3{ display: none; }
#s2:checked ~ #slide2{ position: relative; border-radius: 10px; width: 250px; height: 350px; top: -30%; left: 20vh; box-shadow: 0 3px 7px -1px #000; }
#s2:checked ~ #slide3{ position: relative; border-radius: 10px; width: 200px; height: 300px; top: -45vh; left: 60vh; box-shadow: 0 3px 7px -1px #000; }
/* Slide 3*/
#s3:checked ~ #slide3{ position: relative; border-radius: 10px; width: 250px; height: 350px; top: -30%; left: 20vh; box-shadow: 0 3px 7px -1px #000; }
#s3:checked ~ #slide4{ position: relative; border-radius: 10px; width: 200px; height: 300px; top: -45vh; left: 60vh; box-shadow: 0 3px 7px -1px #000; }
#s4:checked ~ #slide4{ position: relative; border-radius: 10px; width: 250px; height: 350px; top: -116%; left: 20vh; box-shadow: 0 3px 7px -1px #000; }
#s4:checked ~ #slide1{ position: relative; border-radius: 10px; width: 200px; height: 300px; top: -29%; left: 60vh; box-shadow: 0 3px 7px -1px #000; }

HTML代码

<section id="slider">
  <input type="radio" name="slider" id="s1" checked>
  <input type="radio" name="slider" id="s2">
  <input type="radio" name="slider" id="s3">
  <input type="radio" name="slider" id="s4">
  <label for="s1" id="slide1">London</label>
  <label for="s2" id="slide2">Manchester</label>
  <label for="s3" id="slide3">Edinburgh</label>
  <label for="s4" id="slide4">Leeds</label>
</section>

问题根源 #

你的transition设置本身没问题，但前三个标签在非激活状态下被设置了display: none——而display属性是不支持CSS transition过渡的！当元素从display: none切换到显示状态时，会直接突兀地出现，没有过渡动画；而最后一个标签（slide4）从未被设置过display: none，所以它的过渡效果是正常的。

解决方案 #

我们需要用支持过渡的属性替代display: none来隐藏元素，同时统一所有滑块的初始状态，确保它们切换时都从右侧向左滑动：

修改后的CSS代码

/* 给父容器设置相对定位，让子元素的绝对定位基于它 */
#slider {
  position: relative;
  height: 350px; /* 根据滑块高度设置，避免布局塌陷 */
}

/* 统一所有滑块的初始样式：放在右侧视野外，隐藏状态 */
#slider label {
  position: absolute;
  transition: all 0.6s ease;
  opacity: 0;
  visibility: hidden;
  top: 0;
  left: 100vh; /* 初始在右侧视野外 */
  width: 200px;
  height: 300px;
  border-radius: 10px;
}

/* 激活的主滑块样式：显示并移动到左侧主位置 */
#s1:checked ~ #slide1,
#s2:checked ~ #slide2,
#s3:checked ~ #slide3,
#s4:checked ~ #slide4 {
  opacity: 1;
  visibility: visible;
  width: 250px;
  height: 350px;
  top: -30%;
  left: 20vh;
  box-shadow: 0 3px 7px -1px #000;
}

/* 激活的副滑块样式：显示并移动到右侧副位置 */
#s1:checked ~ #slide2,
#s2:checked ~ #slide3,
#s3:checked ~ #slide4,
#s4:checked ~ #slide1 {
  opacity: 1;
  visibility: visible;
  width: 200px;
  height: 300px;
  top: -45vh;
  left: 60vh;
  box-shadow: 0 3px 7px -1px #000;
}

改动说明

1. 替换display: none：用opacity: 0（透明）和visibility: hidden（不可见）组合隐藏元素，这两个属性都支持CSS transition，保证过渡效果生效。
2. 统一初始位置：所有滑块初始都放在右侧视野外（left: 100vh），切换时都会从右侧向左滑动，和最后一个滑块的效果完全一致。
3. 合并重复样式：把重复的激活样式合并，减少代码冗余，也更容易维护。
4. 父容器定位：给#slider设置position: relative，确保子滑块的绝对定位基于父容器，避免布局混乱。

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