How to apply a delay in the CSS display property on a change from none to flex without JavaScript?

Question

How to apply a delay in the CSS display property on a change from none to flex without JavaScript?

Navigation

#1 by (4 votes)

2

How do I make the CSS display property change from none to flex with a delay of 1s without using JavaScript for it?

I have the following code:

#botao-painel:checked ~ .painel {
    display: flex;
    height: 100%;
    left: 0;
   top: 0;
   width: 100%;
}
.painel {
    align-items: center;
    background-color: RGBA(0,0,0,0.85);
    display: none;
    height: 0;
    justify-content: center;
    left: 50%;
    position: fixed;
    top: 50%;
    transition: all 1000ms ease 2000ms;
        -webkit-transition: all 1000ms ease 2000ms;
    width: 0;
    z-index: 500;
}
.painel > div {
    align-items: center;
    background-color: RGB(255,255,255);
    display: flex;
    height: 75%;
    justify-content: center;
    width: 46%;
}

The problem is that when I click on the button it applies the properties in .painel but the delay and nor the animation are used, simply everything appears at once.

Does anyone have any tips to give me how to solve this without using JavaScript, only with CSS?

css css3

asked by anonymous 05.11.2018 / 21:38

1 answer

Help with SqlQuery in context Entity Framework Why is my server code not working with IPv6?

score 4 · Accepted Answer

The problem is that the display does not work with transition, so when checking the element will be applied immediately the display flex.

One outline for this is to use the visibility property of hidden to visible , leaving the element always with display: flex . Since it is a fixed element, it will not interfere with layout in relation to other elements.

The property to apply the delay is the transition-delay .

See in the code below what was removed, added, and changed.

#botao-painel:checked ~ .painel {
   visibility: visible; /* adicionado */
    /*display: flex; removido */
    height: 100%;
    left: 0;
   top: 0;
   width: 100%;
}
.painel {
    align-items: center;
    background-color: RGBA(0,0,0,0.85);
    visibility: hidden; /* adicionado */
    /*display: none;*/
    display: flex; /* alterado */
    height: 0;
    justify-content: center;
    left: 50%;
    position: fixed;
    top: 50%;
    transition: all 1000ms ease 2000ms;
        -webkit-transition: all 1000ms ease 2000ms;
    width: 0;
    z-index: 500;
    -webkit-transition-delay: 5s; /* adicionado */
    transition-delay: 1s; /* adicionado 1 segundo */
}
.painel > div {
    align-items: center;
    background-color: RGB(255,255,255);
    display: flex;
    height: 75%;
    justify-content: center;
    width: 46%;
}

<div>
   <input id="botao-painel" type="checkbox"> Marque e aguarde 1 segundo
   <div class="painel">
      <div>
         Painel
      </div>
   </div>
</div>