使用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>