最后一个标签的过渡效果不同（我希望它们都像最后一个标签一样工作）答案

【问题标题】：My transitions are working differently for the last label (I want them all to work like the last label)最后一个标签的过渡效果不同（我希望它们都像最后一个标签一样工作）
【发布时间】：2021-09-09 15:33:39
【问题描述】：

我添加了一张它目前的样子。我希望他们从右边的盒子滑到左边。但是前三个与最后一个相比有不同的过渡。这是我到目前为止所做的。我的过渡有问题吗？我已经包含了结果的 CSS 代码、HTML 和图像。

#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;
}

<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>


[Outcome][1]

【问题讨论】：

你能检查一下你的问题吗？我看不到图像。
@AHaworth 我刚刚更新了，抱歉
谢谢，看起来你想要的好像是右边有“一堆”卡片，然后根据单击哪个单选按钮和“下一个”，只有一个向左移动'卡片显示在堆的顶部。对吗？

标签： html css web-development-server

【解决方案1】：

这个 sn-p 认为初始位置是右侧的一堆卡片，当点击相关单选按钮时，这些卡片移出，而它们的下一张卡片移动到堆栈的顶部。

作为演示，每张卡片都具有相同的尺寸，但可以更改，因为每张卡片的可见性在不可见时设置为隐藏。请注意，不使用显示无，因为这会完全停止渲染元素，因此转换无法正常工作。通过对比可见性为元素保留了空间，它只是不可见。

#slider label {
  border-radius: 10px;
  box-shadow: 0 3px 7px -1px #000;
  width: 25%;
  height: 25%;
  position: absolute;
  right: 0%;
  display: inline-block;
  visibility: hidden;
  transition: right 0.6s ease;
}

#slider input:nth-of-type(1):checked~label:nth-of-type(1),
#slider input:nth-of-type(1):checked~label:nth-of-type(2),
#slider input:nth-of-type(2):checked~label:nth-of-type(2),
#slider input:nth-of-type(2):checked~label:nth-of-type(3),
#slider input:nth-of-type(3):checked~label:nth-of-type(3),
#slider input:nth-of-type(3):checked~label:nth-of-type(4),
#slider input:nth-of-type(4):checked~label:nth-of-type(4),
#slider input:nth-of-type(4):checked~label:nth-of-type(1) {
  visibility: visible;
}

#slider input:nth-of-type(1):checked~label:nth-of-type(1),
#slider input:nth-of-type(2):checked~label:nth-of-type(2),
#slider input:nth-of-type(3):checked~label:nth-of-type(3),
#slider input:nth-of-type(4):checked~label:nth-of-type(4) {
  right: 50%;
}

<section id="slider">
  <input type="radio" name="slider" id="s1">
  <input type="radio" name="slider" id="s2">
  <input type="radio" name="slider" id="s3" checked>
  <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>

显然，您需要更改尺寸和移动量以适应您的全部用例。

【讨论】：