过渡问题CSS和JS
过渡问题CSS和JS
提问于 2019-08-26 12:19:14
我想为背景-过滤器属性设置一个动画。当我使用普通CSS时，它可以工作，但当我切换JS中的类时，它就不再工作了。
我试图孤立这个问题，但我不知道如何解决它。
菜单HTML
<nav id="main-menu">
<ul>
<a href="http://localhost/jorime/">
<li>Work</li>
</a>
<!-- <a href="services"><li>Services</li></a> -->
<a href="#">
<li id="contact-link">Contact</li>
</a>
</ul>
</nav>联系HTML
<section id="contact-wrapper" class="hide">
<section id="contact-content">
<section id="contact-close-button">
<button>X</button>
</section>
<section id="contact-header">
<h2>Contact</h2>
<p class="importent">Feel free to leave a message!</p>
</section>
<section id="contact-body">
<form action="">
<input type="text" class="contact-form-field" id="contact-form-name"
placeholder="Enter your name" />
<input type="text" class="contact-form-field" id="contact-form-email"
placeholder="Enter your email" />
<textarea class="contact-form-field" rows="10" id="contact-form-message"
placeholder="Enter your message"></textarea>
<section class="flex-right">
<input id="contact-form-submit" type="submit" value="submit" />
</section>
</form>
</section>
</section>
</section>CSS
#contact-wrapper{
display: block;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0, .75);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: backdrop-filter 1.5s;
}
#contact-wrapper.hide{
display: none;
backdrop-filter: blur(0px);
transition: backdrop-filter 1.5s;
}JS
function toggleClass(elementId, cssClass){
var element = document.getElementById(elementId);
element.classList.toggle(cssClass);
}
window.onload = function(){
document.getElementById("contact-link").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
document.getElementById("contact-close-button").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
}我想让背景转换起作用。
有谁可以帮我？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-26 12:47:45
答案：
不能对Display属性进行动画化。
您可以通过使用其他属性(如opacity、visibility和调整height和/或width )来模拟这种情况。常用的方法是将opacity和height设置为0。这将导致与display: none类似的效果，因为它会导致元素有效地删除它在DOM中占用的空间，同时将其呈现为不可见。Note您可能还需要将padding、width和margin设置为0，如果您真的希望它在DOM中尽可能最少地存在。
当其他更改的属性导致元素不可见时，您也不能只转换一个属性，比如backdrop-filter。为什么？，因为浏览器将其解释为“在转换其他属性时立即使该元素不可见”。基本上，这使得整个行动毫无意义。
在您的示例中，向转换添加多个属性的语法如下所示：
transition: prop time, prop time, prop time;如果要转换所有已更改的属性，也可以只使用：
transition: all 1.5s;示例：
注意:我用您的菜单代码更新了。我不知道菜单在哪里，但是为了让它与演示代码一起工作，我必须根据是否应用了hide来修改z索引。这是因为fixed的左上角性质的contact-wrapper。根据您的标记，您可能不需要更改它，也可能需要以不同的方式更改它。
function toggleClass(elementId, cssClass){
var element = document.getElementById(elementId);
element.classList.toggle(cssClass);
}
window.onload = function(){
document.getElementById("contact-link").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
document.getElementById("contact-close-button").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
}#contact-wrapper{
display: block;
opacity: 1;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0, .75);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: opacity 1.5s, margin 1.5s, padding 1.5s, height 1.5s, backdrop-filter 1.5s;
}
#contact-wrapper.hide{
opacity: 0;
height: 0;
padding: 0;
margin: 0;
z-index: -1;
backdrop-filter: blur(0px);
}<nav id="main-menu">
<ul>
<a href="http://localhost/jorime/">
<li>Work</li>
</a>
<!-- <a href="services"><li>Services</li></a> -->
<a href="#">
<li id="contact-link">Contact</li>
</a>
</ul>
</nav>
<section id="contact-wrapper" class="hide">
<section id="contact-content">
<section id="contact-close-button">
<button>X</button>
</section>
<section id="contact-header">
<h2>Contact</h2>
<p class="importent">Feel free to leave a message!</p>
</section>
<section id="contact-body">
<form action="">
<input type="text" class="contact-form-field" id="contact-form-name"
placeholder="Enter your name" />
<input type="text" class="contact-form-field" id="contact-form-email"
placeholder="Enter your email" />
<textarea class="contact-form-field" rows="10" id="contact-form-message"
placeholder="Enter your message"></textarea>
<section class="flex-right">
<input id="contact-form-submit" type="submit" value="submit" />
</section>
</form>
</section>
</section>
</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57664451
复制相关文章
相似问题
腾讯云开发者
