[英]Using hashchange to show/hide divs. How can I disable a CSS transition when page is reloaded or direct link is used?
On the index page of a site, I have a 100vh div which contains a hero image as a background ( #hero
), and some text on top of it that lives inside the #introcontainer
div. 在网站的索引页面上,我有一个100vh的div,其中包含一个英雄图像作为背景( #hero
),并在其顶部的一些文本包含在#introcontainer
div中。
I have it set up so that when you go to other pages via hashchanges, #hero
transitions down to a height of 85px, and #introcontainer
is hidden. 我进行了设置,以便当您通过hashchanges转到其他页面时, #hero
过渡到85px的高度,并且#introcontainer
被隐藏。 Everything is working great showing/hiding content using a switch function. 使用开关功能,一切都可以很好地显示/隐藏内容。
The problem is, when I refresh or go to the url with the hash directly, the hero image is briefly displayed and does it's 200ms transition down to its compressed size. 问题是,当我刷新或直接使用哈希访问URL时,会短暂显示英雄图像,并在200ms的时间内向下转换到其压缩大小。 I'd like to prevent that if possible. 如果可能的话,我想防止这种情况发生。
<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>
You should not set the transition
css style rule in ready
callback. 您不应该在ready
回调中设置transition
CSS样式规则。
Try this: 尝试这个:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.