Javascript从窗口顶部滑动不可见的div

Question

所以我一直在尝试复制 airbnb 的 How it works 按钮的功能。我是 stackoverflow 的新手，所以我不知道链接网站的政策。

我尝试过的:

我的 HTML 模型

<div class="how-it-works">
   <div class="container">
      <div class="row">
          <div class="col-lg-12">
              <span class="pull-right">
                      <span class="glyphicon glyphicon-remove" ng-click="hideHowItWorks()"></span>
              </span>
          </div>
          <div class="col-lg-12">
              <div class="row">
                  <div class="col-lg-3">
                      <div class="hiw-container hiw-step-one"></div>
                  </div>
                  <div class="col-lg-3">
                      <div class="hiw-container hiw-step-two"></div>
                  </div>
                  <div class="col-lg-3">
                      <div class="hiw-container hiw-step-three"></div>
                  </div>
                  <div class="col-lg-3">
                      <div class="hiw-container hiw-step-four"></div>
                  </div>
              </div>
          </div>
      </div>
  </div>

<div class="main-class">
    ...some content....
</div>    

我的 CSS:

.how-it-works{
    position: absolute
    width: 100%
    top: -663px
    padding-top: 40px
    min-height: 663px
}

我使用 JQuery 向下滑动整个 div，而不是使用标准的 slideDown 过程。

$('.btn').on('click', function(){
$('.how-it-works').css('height', $(window).height());
$('.how-it-works').animate({top: '0px'});
$('.main-class').animate({marginTop: '663px'});
})

如果我使用这种方法或 slideDown 的方法，框架在滑动时会出现卡顿现象，效果很差。怎样才能做出类似上述网站的效果？

Answer 1

从顶部在 Canvas 上滑动叠加层。这使用 Vanilla javascript 和 css 动画。在我看来，jQuery 动画总是显得生涩。

var overlay = document.getElementById('overlay');
document.getElementById('open').onclick = function() {
    overlay.style.top = 0;
}
document.getElementById('close').onclick = function() {
    overlay.style.top = '-100%';
}

html, body {
    height: 100%;
    margin: 0;
}
#overlay {
    background: red;
    height: 100%;
    width: 100%;
    position: absolute;
    top: -100%;
    transition: top 1s ease-in-out;
}

<div id="overlay">
    <a href="javascript:void(0)" id="close">close</a>
</div>
<a href="javascript:void(0)" id="open">Open</a>