CODEWITHSUNDEEP
javascripthtmlcsscss-transitionsvisibility
Gleb
Gleb

Reputation: 13

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

I have this html-markup. I make a button with class "open-window", it opens a pop-up window. This window can be closed by pressed button with class "close-window", and when you hover to this button it's background changed with time. After you click on this button, window became invisible, but button still visible for 0.4s (it's transition).

How to hide this button instantly after click and not delete it's background change?

<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>

I'm not sure about using visability here, but idk why display:none not working here. If i set display:none to class "hidden", a pop-up window is visible after a page is loaded and can not be closed.

Upvotes: 1

Views: 135

Answers (1)

C3roe
C3roe

Reputation: 96241

With transition: 0.4s; you are applying a transition to all transitionable properties that undergo a change in value - and visibility is one of them.

The most easy fix here in this instance would probably be, that you just specify which property you want to transition explicitly,

transition: background 0.4s;

Then the change of the visibility property can apply right away.

Upvotes: 1

Related Questions