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>

我们希望，第2步，在进入时，不应该低于第1步，而应该并排。

请推？

对于velocity.js来说相当新，而在js中并不是那么好。

谢谢。

Answer 1

这是一种方法，虽然它们在位置上有重叠点（从示例中可以看出）。

＆＃13;

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

＆＃13;

#step1, #step2 {
  position:absolute;
}

#step2 {
  display: none;
}

＆＃13;

<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>

＆＃13;

如果你这样做，你需要确保正确设置父元素的位置，或者两个元素都可以抛到页面的顶部（或者具有位置的下一个元素：absolute或position：relative ）。您也可以向左浮动它们，虽然因为速度不会改变#step1元素的宽度而它的动画效果，它们在动画结束时会像动画一样快速生成效果。第一个元素，当它最终在第一个元素上没有显示时。

我对速度并不熟悉，但是还有很多其他方法可以用jQuery来实现，甚至可能更好，只需要css（除了点击处理程序）。

jQuery示例：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

CSS示例：

＆＃13;

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

＆＃13;

.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;}
}

＆＃13;

<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>

＆＃13;

如何并排滑动两个元素？

1 个答案: