HTML

在HTML结构中，我们需要一个触发菜单的按钮，如：.cd-bouncy-nav-trigger就是一个用来触发弹出式菜单的按钮。

.cd-bouncy-nav-modal是一个弹出模态窗口，默认隐藏。它用来全屏展示菜单列表，当然也有关闭按钮.cd-close。

点击查看分类Category 1Category 2Category 3Category 4Category 5Category 6Close modal

CSS

我们使用CSS3的transitions动画效果，默认情况下，菜单是隐藏的，当点击.cd-bouncy-nav-trigger按钮后，.fade-in添加到.cd-bouncy-nav中，设置它的透明度和可见性。

.cd-move-in用来设置菜单项的动画效果。

.cd-bouncy-nav-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
}
.cd-bouncy-nav-modal.fade-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s 0s, visibility 0s 0s;
}
.cd-bouncy-nav li {
  transform: translateY(100vh);
}
.fade-in .cd-bouncy-nav li {
  animation: cd-move-in 0.4s;
  animation-fill-mode: forwards;
}
@keyframes cd-move-in {
  0% {
    transform: translateY(100vh);
  }
  65% {
    transform: translateY(-1.5vh);
  }
  100% {
    transform: translateY(0vh);
  }
}

Javascript

我们使用jQuery去监听.cd-bouncy-nav-trigger 的点击事件，以及控制.fade-in/.fade-out样式的添加和删除操作。

jQuery(document).ready(function($){
    var is_bouncy_nav_animating = false;
    //open bouncy navigation
    $(\'.cd-bouncy-nav-trigger\').on(\'click\', function(){
        triggerBouncyNav(true);
    });
    //close bouncy navigation
    $(\'.cd-bouncy-nav-modal .cd-close\').on(\'click\', function(){
        triggerBouncyNav(false);
    });
    $(\'.cd-bouncy-nav-modal\').on(\'click\', function(event){
        if($(event.target).is(\'.cd-bouncy-nav-modal\')) {
            triggerBouncyNav(false);
        }
    });

    function triggerBouncyNav($bool) {
        //check if no nav animation is ongoing
        if( !is_bouncy_nav_animating) {
            is_bouncy_nav_animating = true;
            
            //toggle list items animation
            $(\'.cd-bouncy-nav-modal\').toggleClass(\'fade-in\', $bool).toggleClass(\'fade-out\', !$bool).find(\'li:last-child\').one(\'webkitAnimationEnd oanimationend msAnimationEnd animationend\', function(){
                $(\'.cd-bouncy-nav-modal\').toggleClass(\'is-visible\', $bool);
                if(!$bool) $(\'.cd-bouncy-nav-modal\').removeClass(\'fade-out\');
                is_bouncy_nav_animating = false;
            });
            
            //check if CSS animations are supported... 
            if($(\'.cd-bouncy-nav-trigger\').parents(\'.no-csstransitions\').length > 0 ) {
                $(\'.cd-bouncy-nav-modal\').toggleClass(\'is-visible\', $bool);
                is_bouncy_nav_animating = false;
            }
        }
    }
});

本文地址：https://www.stayed.cn/item/101

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我