翻译一个绝对定位的 div

Question

我以这种方式拥有这个职位，问题是根据我所拥有的翻译每个 div。 CSS就像：

  .col-md-12 {
   display: flex;
   flex-wrap: wrap;
  }

 .col-md-12 input:checked + label {
   color: red;
 }
.col-md-12 input:checked + label + div.slider {
  color: red; 
}
.col-md-12 div.slide-1 {
  left: -100%;
}
.col-md-12 div.slide-2 {
   left: 0%;
}
.col-md-12 div.slide-3 {
   left: 100%;
}

.col-md-12 input {
  flex-basis: 3%;
  margin-right: 27%;
  order: 1;
}
.col-md-12 label {
  flex-basis: 30%;
   margin-top: 10px;
   order: 2;
}
.col-md-12 .navigator {
   flex-basis: 50%;
  margin-top: 10px;
  order: 3;
}
.col-md-12 .slider {
  flex-basis: 100%;
  margin-top: 10px;
  order: 4;
  width: 80%;
  height: 250px;
  position: absolute;
  top: 70px;
}  

html是这样的

  <div class="col-md-12">
          <input type="radio" name="slider" class="slide-radio1" id="slider_1">
          <label for="slider_1" class="page1">label 1</label>
          <div class="slider slide-1 inner-container">
          container 1
          </div>

          <input type="radio" name="slider" class="slide-radio2" checked id="slider_2">
          <label for="slider_2" class="page2">label 2</label>
          <div class="slider slide-2 inner-container">
          container 2
          </div>

          <input type="radio" name="slider" class="slide-radio3" id="slider_3">
          <label for="slider_3" class="page3">label 3</label>
          <div class="slider slide-3 inner-container">
          container 3
          </div>  

          <!-----slider Navigator----->
          <div class="navigator left">
            <i class="fa fa-chevron-left" aria-hidden="true">nav left</i>
          </div>
          <div class="navigator right">
            <i class="fa fa-chevron-right" aria-hidden="true">nav right</i>
          </div>

  </div>

我想在不使用类 slide-* 的情况下将每个 div 向相反方向平移 100px，因为它们（div.slide）将被动态生成。

Answer 1

我建议您这样做，您可以使用transform: translateX(-100%) 将所有内容移出视图，然后使用transform: translateX(0); 将选中的内容移入视图

.col-md-12 {
  display: flex;
  flex-wrap: wrap;
}

.col-md-12 input:checked+label {
  color: red;
}

.col-md-12 input:checked+label+div.slider {
  color: red;
}

.col-md-12 input+label+div.slider {
  transform: translateX(-100%);
}

.col-md-12 input:checked+label+div.slider {
  transform: translateX(0);
  transition: transform 1s;
}

.col-md-12 input {
  flex-basis: 3%;
  margin-right: 27%;
  order: 1;
}

.col-md-12 label {
  flex-basis: 30%;
  margin-top: 10px;
  order: 2;
}

.col-md-12 .navigator {
  flex-basis: 50%;
  margin-top: 10px;
  order: 3;
}

.col-md-12 .slider {
  flex-basis: 100%;
  margin-top: 10px;
  order: 4;
  background: lightgray;
  width: 80%;
  height: 250px;
  position: absolute;
  top: 70px;
}

<div class="col-md-12">
  <input type="radio" name="slider" class="slide-radio1" id="slider_1">
  <label for="slider_1" class="page1">label 1</label>
  <div class="slider slide-1 inner-container">
    container 1
  </div>

  <input type="radio" name="slider" class="slide-radio2" checked id="slider_2">
  <label for="slider_2" class="page2">label 2</label>
  <div class="slider slide-2 inner-container">
    container 2
  </div>

  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <label for="slider_3" class="page3">label 3</label>
  <div class="slider slide-3 inner-container">
    container 3
  </div>

  <!-----slider Navigator----->
  <div class="navigator left">
    <i class="fa fa-chevron-left" aria-hidden="true">nav left</i>
  </div>
  <div class="navigator right">
    <i class="fa fa-chevron-right" aria-hidden="true">nav right</i>
  </div>

</div>