如何并排滑动两个元素？

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>