javascript - 如何并排滑动两个元素？

Question

下面是实际效果的代码:

function nextStepTransition() {
 $("#step1").velocity("transition.slideLeftBigOut", 2000);
 $("#step2").velocity("transition.slideRightBigIn", 2000);
}

#step2 {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.js"></script>

<div id="step1">
  <p>I'm step number one!</p>
  <button onClick="nextStepTransition()">click me to go to the next step</button>
  </div>
<div id="step2"> 
  <p>I'm step number two</p>
</div>

我们希望，step2进来时，不应停留在step1下方，而是并排放置。

请问有什么推送吗？

对velocity.js来说相当新，而且在js方面不太擅长。

谢谢。

Answer 1

这是一种方法，尽管它们在位置上会有重叠(正如您从示例中看到的那样)。

function nextStepTransition() {
  $("#step1").velocity("transition.slideLeftBigOut", 2000);
  $("#step2").velocity("transition.slideRightBigIn", 2000);
}

#step1, #step2 {
  position:absolute;
}

#step2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.js"></script>

<div id="step1">
  <p>I'm step number one!</p>
  <button onClick="nextStepTransition()">click me to go to the next step</button>
</div>
<div id="step2"> 
  <p>I'm step number two</p>
</div>

如果你这样做，你需要确保父元素的位置设置正确，否则两个元素都可能被抛出到页面顶部(或者下一个具有position:absolute或position:relative的元素) )。您也可以将它们都向左浮动，尽管因为速度在动画时不会改变 #step1 元素的宽度，所以当第一个元素最终不显示任何内容时，它们将在第一个元素的动画结束时成为类似捕捉的效果在第一个元素上。

我不熟悉速度，但是有许多其他方法可以仅使用 jQuery 来实现此目的，甚至可能更好，仅使用 css(单击处理程序除外)。

jQuery 示例:

$(document).ready(function(){
  $("#theButton").on('click', function(){
    $("#step1").animate({
      marginLeft: "-200px",
      opacity: 0
    }, 2000, function(){
      $(this).hide()
    });
    $("#step2").show().animate({
      opacity: 1,
    }, 2000);
  });
});

.container {
  overflow:hidden;
}
#step1, #step2 {
  float:left;
  width:200px;
}
#step2 {
  opacity:0;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div id="step1">
    <p>I'm step number one!</p>
    <button id="theButton">click me to go to the next step</button>
    </div>
  <div id="step2"> 
    <p>I'm step number two</p>
  </div>
</div>

CSS 示例:

$(document).ready(function(){
  $("#theButton").on('click', function(){
    $("#step1").addClass("fadeAway");
    $("#step2").addClass("fadeIn");
  });
});

.container {
  overflow:hidden;
}
#step1, #step2 {
  float:left;
  width:200px;
}
#step2 {
  opacity:0;
  display:none;
}
#step1.fadeAway {
  animation: moveAndFadeOut 2s forwards;
}
#step2.fadeIn { /*need to add "#step2" here to override styles above*/
  display:block;
  animation: fadeIn 2s forwards;
}

@keyframes moveAndFadeOut {
  0% {margin-left:0px; opacity:1;}
  100% {margin-left:-200px; opacity:0; display:none;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div id="step1">
    <p>I'm step number one!</p>
    <button id="theButton">click me to go to the next step</button>
    </div>
  <div id="step2"> 
    <p>I'm step number two</p>
  </div>
</div>