ブートストラップnavbar、完全な高さnavbar-collapseしかし奇妙なアニメーション

私は、全体のビュー（100vh）をカバーする展開メニューを含むdivを持つことができました。クールなアニメーションは、自分自身が拡大している間に、リコンテンツの最後（最後のメニューリンク）までしか動作していないと、スピードが上がるか、単にアニメーションが停止し、最終的にnavbar-collapseがビューポートではなく、良い方法で。ブートストラップnavbar、完全な高さnavbar-collapseしかし奇妙なアニメーション

あなたはその理由を知っていますか？それはブートストラップのjavascriptの機能ですか？あなたはそれを修正する方法を知っていますか？

私はこのフィドル

body { 
 
    padding-top: 53px; 
 
} 
 

 
.pids-navbar{ 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    z-index: 99999; 
 
} 
 

 
.pids-navbar-toggle .pids-icon-bar { 
 
    display: block; 
 
    width: 16px; 
 
    height: 1px; 
 
    border-radius: 1px; 
 
} 
 

 
.pids-navbar-toggle { 
 
    margin-top: 14px; 
 
    margin-bottom: 14px; 
 
    margin-right: 0px; 
 
    float: left; 
 
} 
 

 
.pids-navbar-nav { 
 
    margin: 0px -15px; 
 
    font-weight: lighter; 
 
} 
 

 
.pids-navbar-collapse { 
 
    border: 0px; 
 
    height: calc(100vh - 60px); 
 
} 
 
.full-height { 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 

 

 

 
<nav class="navbar navbar-default navbar-static-top pids-navbar"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle pids-navbar-toggle" data-toggle="collapse" data-target="#pids-bs-navbar"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar pids-icon-bar"></span> 
 
     <span class="icon-bar pids-icon-bar"></span> 
 
     <span class="icon-bar pids-icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div class="navbar-collapse collapse pids-navbar-collapse" id="pids-bs-navbar"> 
 
     <ul class="nav navbar-nav pids-navbar-nav full-height"> 
 
     <li class="active"> 
 
      <a href="#">Home 1</a> 
 
     </li> 
 
     <li class=""> 
 
      <a href="#">Home 2</a> 
 
     </li> 
 
     <li class=""> 
 
      <a href="#">Home 3</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

おかげでコードをコピーしました！

出典

2017-11-28 Micky

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
    font-family: 'Lato', sans-serif; 
} 

.overlay { 
    height: 0%; 
    width: 100%; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0, 0.9); 
    overflow-y: hidden; 
    transition: 0.5s; 
} 

.wrap { 
    position: relative; 
    top: 25%; 
    width: 100%; 
    text-align: center; 
    margin-top: 30px; 
} 

.overlay a { 
    padding: 8px; 
    text-decoration: none; 
    font-size: 36px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
} 

.overlay a:hover, .overlay a:focus { 
    color: #f1f1f1; 
} 

.overlay .closebtn { 
    position: absolute; 
    top: 20px; 
    right: 45px; 
    font-size: 60px; 
} 

@media screen and (max-height: 450px) { 
    .overlay {overflow-y: auto;} 
    .overlay a {font-size: 20px} 
    .overlay .closebtn { 
    font-size: 40px; 
    top: 15px; 
    right: 35px; 
    } 
} 
</style> 
</head> 
<body> 

<div id="myNav" class="overlay"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
    <div class="wrap"> 
    <a href="#">Home</a> 
    <a href="#">Home 1</a> 
    <a href="#">Home 2</a> 
    <a href="#">Home 3</a> 
    </div> 
</div> 


<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 

<script> 
function openNav() { 
    document.getElementById("myNav").style.height = "100%"; 
} 

function closeNav() { 
    document.getElementById("myNav").style.height = "0%"; 
} 
</script> 

</body> 
</html>

出典

2017-11-28 18:07:50 Shweta

ブートストラップnavbar、完全な高さnavbar-collapseしかし奇妙なアニメーション

答えて

関連する問題