Разделы, которые появляются справа налево

Question

Я пытаюсь добиться этого:

ПРИМЕР

У меня есть div с ids = "section1", "section2" и т. Д. Этот div содержит частьформы с некоторыми вопросами :) внутри каждого div, у нас есть другой div, играющий рулон кнопки.

Я сделал код JavaScript, который, когда вы нажимаете «кнопку», тогда будет двигаться справа: autoнаправо: 100%;и section2 будет перемещаться справа: -100% вправо: авто;другими словами, секция 2 идет от правой границы к центру, а фактическая секция идет от центра к самой левой стороне и исчезает.Больше похоже на карусель?Я делаю это вручную, но это боль, и я хотел бы понять, как автоматизировать это?может кто-нибудь объяснить мне?спасибо

document.getElementById('section2').onclick = function() {
  $('.one').css('right', '100%');
  $('.two').css('right', 'auto');
}

document.getElementById('section3').onclick = function() {
  $('.two').css('right', '100%');
  $('.three').css('right', 'auto');
}

.questionsContainer {
  width: 100%;
  height: calc(100% - 200px);
  position: absolute;
  background-color: lime;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section {
  background-color: purple;
  transition: all 1s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.one {
  position: absolute;
  right: auto;
  transition: all 1s ease-in-out;
}

.two {
  position: absolute;
  right: -100%;
  transition: all 1s ease-in-out;
}

.three {
  position: absolute;
  right: -100%;
  transition: all 1s ease-in-out;
}

.sectionTitle {
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 30px;
  margin: 0 auto;
}

.buttonContinue {
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  background-color: red;
  border-radius: 5px;
  margin: 20px 0px;
  text-align: center;
  cursor: pointer;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="questionsContainer">

  <div class="section one">
    <p class="sectionTitle">This is the First Question?</p>
    <div class="buttonContinue" id="section2">CONTINUE</div>
  </div>

  <div class="section two">
    <p class="sectionTitle">Aja! time for the Second one!!</p>
    <div class="buttonContinue" id="section3">CONTINUE</div>
  </div>

  <div class="section three">
    <p class="sectionTitle">Another Question? 3 so far?</p>
    <div class="buttonContinue" id="section4">CONTINUE</div>
  </div>

</div>

о, я пытаюсь плавно анимировать его с переходом: все 0.2s облегчаются;и он не работает, он просто появляется посередине :(, я хочу сделать плавный переход?

Заранее спасибо!

Answer 1

анимирует теги раздела от 0 до 100%, так как анимация от авто до 100% не будет работать.Я перестроил теги раздела на 100%, чтобы анимировать от 0 до 100%.

https://jsfiddle.net/yh4yvoe3/11/

document.getElementById('section2').onclick = function(){
$('.one').css('right','100%');
$('.two').css('right','0');
}   

document.getElementById('section3').onclick = function(){
$('.two').css('right','100%');
$('.three').css('right','0');
}

.questionsContainer {
        width: 100%;
        height: calc(100% - 200px);
        position: absolute;
        background-color: lime;
        overflow: hidden;
    }

.section {
       
        transition: all 1s ease-in-out;
        text-align: center;
        width: 100%;
    }
.section >div {
    width: fit-content;
    background-color: purple;
    margin: 0px auto;
    padding: 5px;
}
    .one {
        position: absolute;
        right: 0;
        transition: all 1s ease-in-out;
    }

    .two {
        position: absolute;
        right: -100%;
        transition: all 1s ease-in-out;
    }

    .three {
        position: absolute;
        right: -100%;
        transition: all 1s ease-in-out;
    }

    .sectionTitle {
        font-family: 'Montserrat', sans-serif;
        color: white;
        font-size: 30px;
        margin: 0 auto;
    }

    .buttonContinue {
        font-family: 'Montserrat', sans-serif;
        color: white;
        font-size: 16px;
        padding: 10px 20px;
        background-color: red;
        border-radius: 5px;
        margin: 20px auto;
        text-align: center;
        cursor: pointer;
        width: 100px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="questionsContainer">

        <div class="section one">
            <div>
            <p class="sectionTitle">This is the First Question?</p>
            <div class="buttonContinue" id="section2">CONTINUE</div>            
            </div>        
        </div>

        <div class="section two">
            <div>
            <p class="sectionTitle">Aja! time for the Second one!!</p>
            <div class="buttonContinue" id="section3">CONTINUE</div>            
            </div>        
        </div>

        <div class="section three">
            <div>
             <p class="sectionTitle">Another Question? 3 so far?</p>
            <div class="buttonContinue" id="section4">CONTINUE</div>           
            </div>        
        </div>

    </div>