翻译一个绝对定位的分区 [英] Translating an absolutely positioned div

问题描述

我在这方面有这个立场，问题是根据我所拥有的东西来翻译每个div。
的CSS是这样的：

pre code> .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％;
保证金率：27％;
order：1;
}
.col-md-12标签{
flex-basis：30％;
margin-top：10px;
order：2;
}
.col-md-12 .navigator {
flex-basis：50％;
margin-top：10px;
命令：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 =radioname =sliderclass =slide-radio1id =slider_1> 
< label for =slider_1class =page1> label 1< / label> 
< div class =slider slide-1 inner-container> 
容器1 
< / div> 
 
< input type =radioname =sliderclass =slide-radio2checked id =slider_2> 
< label for =slider_2class =page2> label 2< / label> 
< div class =slider slide-2 inner-container> 
容器2 
< / div> 
 
< input type =radioname =sliderclass =slide-radio3id =slider_3> 
< label for =slider_3class =page3> label 3< / label> 
< div class =slider slide-3 inner-container> 
容器3 
< / div> 
 
 <！-----滑块导航器-----> 
< div class =navigator left> 
< i class =fa fa-chevron-leftaria-hidden =true> nav left< / i> 
< / div> 
< div class =navigator right> 
< i class =fa fa-chevron-rightaria-hidden =true> nav right< / i> 
< / div> 
 
< / div> 
  

我想在不使用类slide- *的情况下，因为他们（div.slide）会被动态生成。

解决方案

我可以建议你这样做吗？ c $ c> transform：translateX（-100％）将所有视图移出视图，然后使用 transform：translateX（0）;

<类=预 片段码-CSS琅CSS prettyprint-越权> .COL-MD-12 {显示：弯曲; 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）;转换：变换1s;}。col-md-12 input {flex-basis：3％;保证金：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;顺序：4;背景：lightgray;宽度：80％; height：250px;位置：绝对;顶部：70像素;}

<预类= 片段码-HTML语言HTML的prettyprint-越权> < DIV类=栏-MD-12\" > < input type =radioname =sliderclass =slide-radio1id =slider_1> < label for =slider_1class =page1> label 1< / label> < div class =slider slide-1 inner-container>容器1< / div> < input type =radioname =sliderclass =slide-radio2checked id =slider_2> < label for =slider_2class =page2> label 2< / label> < div class =slider slide-2 inner-container>容器2< / div> < input type =radioname =sliderclass =slide-radio3id =slider_3> < label for =slider_3class =page3> label 3< / label> < div class =slider slide-3 inner-container>容器3< / div> <！----- slider slider Navigator -----> < div class =navigator left> < i class =fa fa-chevron-leftaria-hidden =true> nav left< / i> < / DIV> < div class =navigator right> < i class =fa fa-chevron-rightaria-hidden =true> nav right< / i> < / div>< / 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.

解决方案

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>

这篇关于翻译一个绝对定位的分区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！