Translating an absolutely positioned div

问题

I have this position in this ways, the problem is translating each divs based on what i have. the css is like:

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

and the html is like this

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

i will like to translating each of the divs 100px in opposite directions without using the class slide-*, because they(div.slide) will be dynamically generated.

回答1:

May I suggest you do like this, where you use transform: translateX(-100%) to move all out of view and then move the checked one into view with 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>

来源：https://stackoverflow.com/questions/44089440/translating-an-absolutely-positioned-div