ハッシュ変更を使用してdivを表示/非表示します。ページがリロードされた場合、またはダイレクトリンクが使用されている場合、どのようにCSSの遷移を無効にすることができますか？

Question

サイトのインデックスページには、背景としてヒーローイメージ（#hero）を含む100vh divと、#introcontainer div内にあるテキストがあります。

hashchanges経由で他のページにアクセスすると、#heroが高さ85pxになり、#introcontainerが非表示になるように設定しました。すべてがスイッチ機能を使用してコンテンツの表示/非表示を行っています。

問題は、私がリフレッシュしたり、ハッシュでURLに直接行くと、ヒーローイメージが簡単に表示され、圧縮されたサイズまで200msのトランジションになります。私は可能ならばそれを防ぐつもりです。

<script> 
    function nav() { 
    switch (window.location.hash) { 
       case "#work": 
         document.getElementById("workblock").style.cssText = 'display: block;' 
         document.getElementById("workblock").className = "" 
         document.getElementById("aboutblock").style.cssText = 'display: none;' 
         document.getElementById("recentblock").style.cssText = 'display: none;' 
         document.getElementById("hero").style.cssText = 'height: 85px; transition: 200ms ease-in-out; cursor: auto;' 
         document.getElementById("introcontainer").style.cssText = 'visibility: hidden; opacity: 0; transition: visibility 200ms, opacity 200ms linear;'; 

         break; 

       case "#about": 
         document.getElementById("aboutblock").className = "" 
         document.getElementById("aboutblock").style.cssText = 'display: block;' 
         document.getElementById("recentblock").style.cssText = 'display: none;' 
         document.getElementById("workblock").className = "offscreen" 
         document.getElementById("hero").style.cssText = 'height: 85px; transition: 200ms ease-in-out; cursor: auto;' 
         document.getElementById("introcontainer").style.cssText = 'visibility: hidden; opacity: 0; transition: visibility 200ms, opacity 200ms linear;'; 
         break; 


       default: 
         document.getElementById("recentblock").style.cssText = 'display: block;' 
         document.getElementById("aboutblock").className = "offscreen" 
         document.getElementById("workblock").className = "offscreen" 
         document.getElementById("hero").style.cssText = 'height: 100vh; cursor: auto;' 
         document.getElementById("introcontainer").style.cssText = 'visibility: visible; opacity: 1; transition: visibility 200ms, opacity 200ms linear;'; 

     } 
    } 

    $(document).ready(function() { 
     nav(); 

    $(window).bind('hashchange', function(){ 
     nav(); 
     }); 
    }); //doc ready 
</script> 

Answer 1

あなたはreadyコールバックでtransition CSSスタイルルールを設定すべきではありません。

<script> 
 
function nav(isHashChange) { 
 
    switch (window.location.hash) { 
 
     case "#work": 
 
      document.getElementById("workblock").style.cssText = 'display: block;' 
 
      document.getElementById("workblock").className = "" 
 
      document.getElementById("aboutblock").style.cssText = 'display: none;' 
 
      document.getElementById("recentblock").style.cssText = 'display: none;' 
 
      document.getElementById("hero").style.cssText = 'height: 85px; transition: 200ms ease-in-out; cursor: auto;' 
 

 
      document.getElementById("introcontainer").style.cssText = isHashChange 
 
       ? 'visibility: hidden; opacity: 0; transition: visibility 200ms, opacity 200ms linear;' 
 
       : 'visibility: hidden; opacity: 0;'; 
 

 
      break; 
 

 
     case "#about": 
 
      document.getElementById("aboutblock").className = "" 
 
      document.getElementById("aboutblock").style.cssText = 'display: block;' 
 
      document.getElementById("recentblock").style.cssText = 'display: none;' 
 
      document.getElementById("workblock").className = "offscreen" 
 
      document.getElementById("hero").style.cssText = 'height: 85px; transition: 200ms ease-in-out; cursor: auto;' 
 
      document.getElementById("introcontainer").style.cssText = isHashChange 
 
       ? 'visibility: hidden; opacity: 0; transition: visibility 200ms, opacity 200ms linear;' 
 
       : 'visibility: hidden; opacity: 0;'; 
 
      break; 
 

 

 
     default: 
 
      document.getElementById("recentblock").style.cssText = 'display: block;' 
 
      document.getElementById("aboutblock").className = "offscreen" 
 
      document.getElementById("workblock").className = "offscreen" 
 
      document.getElementById("hero").style.cssText = 'height: 100vh; cursor: auto;' 
 
      document.getElementById("introcontainer").style.cssText = isHashChange 
 
       ? 'visibility: visible; opacity: 1; transition: visibility 200ms, opacity 200ms linear;' 
 
       : 'visibility: visible; opacity: 1;'; 
 

 
     } 
 
} 
 

 
$(document).ready(function() { 
 
    nav(false); 
 

 
    $(window).bind('hashchange', function(){ 
 
     nav(true); 
 
    }); 
 
}); //doc ready 
 
</script>