Question

我正在努力实现这一目标：

我有id为=“ section1”，“ section2”等的div。此div包含表单的一部分，带有一些问题:)在每个div中，我们还有另一个div在滚动按钮。

我已经完成了一个javascript代码，当您单击“按钮”时，它将从右移动：自动，向右移动：100％；第2节将从右：-100％移至右：自动；换句话说，section2从右边界到中心，而实际部分从中心到最左边并消失。更喜欢轮播吗？我正在手动执行操作，但是很痛苦，我想了解如何自动执行此操作？有人可以解释我吗？谢谢

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>

从右到左显示的Div部分

1 个答案: