Question

我想为background-filter属性设置动画。当我使用纯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");
    });
}

我希望背景幕过渡正常。

有人可以帮助我吗？谢谢！

Answer 1

答案：

您无法为Display属性设置动画。

您可以通过使用其他属性（例如opacity，visibility并调整height和/或width来模拟此情况。通常将opacity和height设置为0。这会导致与display: none类似的效果，因为它会导致元素有效地删除它在DOM中占用的空间，同时使其不可见。注意，如果您确实希望将padding，width和margin设置为0，那么您可能还需要将它们{尽可能的DOM。

当某些其他更改的属性导致元素不可见时，您也不能仅转换{em> one 这样的属性，例如backdrop-filter。 为什么？，因为浏览器将其解释为“在转换其他属性时立即使该元素不可见 *”。基本上，它使整个操作变得毫无意义。

您要添加多个属性以进行过渡的语法如下：

 transition: prop time, prop time, prop time;

如果要转换所有更改的属性，也可以使用：

 transition: all 1.5s;

示例：

注意：我已更新您的菜单代码。我不知道菜单位于何处，但是要使其与演示代码一起使用，我必须根据是否应用hide来更改z-index。这是因为fixed的{{1}}的左上角性质。根据您的标记，您可能不需要更改此标记或可能需要进行不同的更改。

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);
        }

过渡问题CSS和JS

1 个答案:

答案：

示例：