如果孩子有过渡，如何立即改变孩子的可见性属性答案

【问题标题】：How to instantly change the visibility property of child if it has a transition如果孩子有过渡，如何立即改变孩子的可见性属性
【发布时间】：2022-01-31 18:01:51
【问题描述】：

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

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

<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 设置为“隐藏”类，则在加载页面后会显示一个弹出窗口并且无法关闭。

【问题讨论】：

不要转换所有属性，只转换背景？
哎呀，谢谢，这很容易，但我想不通。如何评价您的评论作为解决方案？
评论只能被点赞，但不能被标记为已接受的解决方案。我为你添加了完整的答案。

标签： javascript html css css-transitions visibility

【解决方案1】：

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

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

transition: background 0.4s;

那么visibility属性的更改可以立即应用。

【讨论】：