如果有过渡，如何立即更改子项的可见性属性

Question

我有这个 html-标记。我用 class“open-window”制作了一个按钮，它会打开一个弹出窗口 window。这个 window 可以通过按下按钮 class "close-window" 来关闭，当你悬停在这个按钮上时，它的背景会随着时间而改变。单击此按钮后，window 变为不可见，但按钮仍然可见 0.4s（过渡）。

如何在点击后立即隐藏这个按钮而不删除它的背景变化？

<h3>Block title</h3>
<p>
    Block text.Block text.Block text.Block text.Block text.Block text.
</p>
<button class="open-window">Learn more</button>

<div class="window hidden">
    <button class="close-window">
        <span>×</span>
    </button>
    <h3>Block2 title</h3>
    <p>
        Block2 text.Block2 text.Block2 text.Block2 text.Block2 text.
    </p>
    <a href="" class="window-button">
        <button>Go to somewhere</button>
    </a>
    </div>
</div>
<style> 
.hidden{
    visibility: hidden;
}
.window{
    display: flex;
    flex-direction: column;
    height: 250px;
    background: lightgray;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    padding: 10px;
}
.close-window {
    position: fixed;
    background: green;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    border: black solid;
    border-radius: 50%;
}
.close-window:hover{
    background: blue;
    transition: 0.4s;
}
</style>
<script>
    let openButtons = document.getElementsByClassName('open-window');
    let closeButtons = document.getElementsByClassName('close-window');

    for (let i = 0; i < openButtons.length; i++) {
        openButtons[i].addEventListener('click', ()=>{
            openButtons[i].nextElementSibling.classList.toggle("hidden");
        })
    }

    for (let i = 0; i < closeButtons.length; i++) {
        closeButtons[i].addEventListener('click', ()=>{
            closeButtons[i].parentElement.classList.add("hidden");
        })
    }
</script>

我不确定在这里使用可见性，但我知道为什么 display:none 在这里不起作用。如果我将 display:none 设置为 class“隐藏”，则在加载页面后弹出 window 可见并且无法关闭。

Answer 1

使用 transition: 0.4s; 时，您正在对所有发生值变化的可转换属性应用转换 - visibility 就是其中之一。

在这种情况下，最简单的解决方法可能是，您只需明确指定要转换的属性，

transition: background 0.4s;

然后 visibility 属性的更改可以立即应用。

如果有过渡，如何立即更改子项的可见性属性

How to instantly change the visibility property of child if it has a transition

html

javascript

css

visibility

css-transitions

如果有过渡，如何立即更改子项的可见性 属性

How to instantly change the visibility property of child if it has a transition

html

javascript

css

visibility

css-transitions

如果有过渡，如何立即更改子项的可见性属性