Javascript 使用hashchange显示/隐藏div。当重新加载页面或使用直接链接时，如何禁用CSS转换？

在一个站点的索引页面上，我有一个100vh div，其中包含一个英雄图像作为背景（

#hero

），以及一些位于其顶部的文本，这些文本位于

#introcontainer

div中

我将其设置为，当您通过hashchanges转到其他页面时，

#hero

会向下转换到85像素的高度，并且

#introcontainer

会被隐藏。使用切换功能显示/隐藏内容，一切正常

问题是，当我刷新或直接使用散列访问url时，会短暂显示英雄图像，并将其转换为200毫秒的压缩大小。如果可能的话，我想避免这种情况

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

函数nav（）{
开关（window.location.hash）{
案例“#工作”：
document.getElementById（“工作块”）.style.cssText='display:block；'
document.getElementById（“工作块”）.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='可见性：隐藏；不透明度：0；转换：可见性200ms，不透明度200ms线性；'；
打破
案例“#关于”：
document.getElementById（“aboutblock”）.className=“”
document.getElementById（“aboutblock”）.style.cssText='display:block；'
document.getElementById（“recentblock”）.style.cssText='display:none；'
document.getElementById（“工作块”）.className=“屏幕外”
document.getElementById（“hero”）.style.cssText='height:85px；transition:200ms ease-in-out；cursor:auto；'
document.getElementById（“introcontainer”）.style.cssText='可见性：隐藏；不透明度：0；转换：可见性200ms，不透明度200ms线性；'；
打破
违约：
document.getElementById（“recentblock”）.style.cssText='display:block；'
document.getElementById（“aboutblock”）.className=“屏幕外”
document.getElementById（“工作块”）.className=“屏幕外”
document.getElementById（“hero”）.style.cssText='height:100vh；cursor:auto；'
document.getElementById（“introcontainer”）.style.cssText='可见性：可见；不透明度：1；转换：可见性200ms，不透明度200ms线性；'；
}
}
$（文档）.ready（函数（）{
导航（）；
$（窗口）.bind（'hashchange'，function（）{
导航（）；
});
}); //医生准备好了吗

您不应该在

就绪

回调中设置

转换

css样式规则

试试这个：

功能导航（isHashChange）{
开关（window.location.hash）{
案例“#工作”：
document.getElementById（“工作块”）.style.cssText='display:block；'
document.getElementById（“工作块”）.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
？'可见性：隐藏；不透明度：0；过渡：可见性200ms，不透明度200ms线性；'
：'可见性：隐藏；不透明度：0；'；
打破
案例“#关于”：
document.getElementById（“aboutblock”）.className=“”
document.getElementById（“aboutblock”）.style.cssText='display:block；'
document.getElementById（“recentblock”）.style.cssText='display:none；'
document.getElementById（“工作块”）.className=“屏幕外”
document.getElementById（“hero”）.style.cssText='height:85px；transition:200ms ease-in-out；cursor:auto；'
document.getElementById（“introcontainer”）.style.cssText=isHashChange
？'可见性：隐藏；不透明度：0；过渡：可见性200ms，不透明度200ms线性；'
：'可见性：隐藏；不透明度：0；'；
打破
违约：
document.getElementById（“recentblock”）.style.cssText='display:block；'
document.getElementById（“aboutblock”）.className=“屏幕外”
document.getElementById（“工作块”）.className=“屏幕外”
document.getElementById（“hero”）.style.cssText='height:100vh；cursor:auto；'
document.getElementById（“introcontainer”）.style.cssText=isHashChange
？可见性：可见；不透明度：1；过渡：可见性200ms，不透明度200ms线性；'
：'可见性：可见；不透明度：1；'；
}
}
$（文档）.ready（函数（）{
导航（假）；
$（窗口）.bind（'hashchange'，function（）{
导航（真）；
});
}); //医生准备好了吗

Ahh。这是有道理的。它应该去哪里？在显示/隐藏的div的单击功能中？这太棒了！谢谢起初它不起作用。即使将它自己的功能作为一个独立于开关的点击事件也不起作用。然后我想起我的CSS中有

*{-webkit转换：所有200ms易用；-moz转换：所有200ms易用；-o转换：所有200ms易用；转换：所有200ms易用；}

！不要再那样做了。