javascript - 页面过渡向下滑动和弹跳

Question

当我在我的第一个网页上单击一个按钮时，我想让第二个页面向下滑动然后弹跳几次。到目前为止，我已经获得了用于向下滑动操作的 javascript 函数，但我无法弄清楚如何使页面弹跳。有javascript弹跳功能吗？我应该使用关键帧吗？如果我使用 css 关键帧，我如何将它们与我的初始 javascript 函数相关联？

<script type="text/javascript">

(function() {

    var windowH = $(window).height(),
        documElem = $(document),
        slideDownPage = $('.slide-down-page'),
        content = $('.content'),
        btns = $('.btn'),
        animSpeed = 500;

    slideDownPage.css({
        height: windowH + 'px',
        top: -windowH + 'px'
    });

  content.css({
  height: windowH+'px',})

    btns.on('click', function(e) {
        if ( $(this).hasClass('open') ) {
            slideDownPage.animate({'top': 0}, animSpeed);
            content.animate({'margin-top': windowH + 'px'}, animSpeed);
        }
        else {
            slideDownPage.animate({'top': -windowH + 'px'}, animSpeed);
            content.animate({'margin-top': 0}, animSpeed);
        }
        e.preventDefault();
    });

    documElem.on('scroll', function() {
        if ( $(this).scrollTop() > slideDownPage.height() && slideDownPage.css('top') === '0px' ) {
            slideDownPage.css('top', -windowH + 'px');
            content.css('margin-top', 0);
            documElem.scrollTop(0);
        }
    });         
})();      
</script>

Answer 1

你可以为此使用 css keyframs，一个例子来自 How to create bouncing div animation .

HTML:

<div class="bounce"></div>

CSS:

.bounce {
    -webkit-animation:bounce 1s infinite;
}

@-webkit-keyframes bounce {
      0%       { bottom:5px; }
      25%, 75% { bottom:15px; }
      50%      { bottom:20px; }
      100%     { bottom:0;}
}

阅读更多关于 css 关键帧的信息 here .