使用hashchange顯示/隱藏div。 重新加載頁面或使用直接鏈接時，如何禁用CSS過渡？

Question

在網站的索引頁面上，我有一個100vh的div，其中包含一個英雄圖像作為背景（ #hero ），並在其頂部的一些文本包含在#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>