Question

所以我一直在尝试复制airbnb的工作原理按钮的功能。我是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 procedure。

$('.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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript从窗口顶部滑动隐形div

1 个答案: