add the property "display: none" after n number of seconds achieving a smooth transition

Question

I'm trying to make the effect of "flip card", when I click, on the front, I want that after n amount of time the front div has the property display: none;

with this rule, I detect when the back is active
.card.is-flipped  .card__face.card__face--front {
 display:none;
}

This is to avoid having interaction with the elements of the front when you have the back as active. But it looks very abrupt when the display: none property is applied, so I would like it to be applied after n number of seconds to apply when it is in the back and the user does not realize this

this is my code:

  var card = document.querySelector('.card');
  card.addEventListener( 'click', function() {
    card.classList.toggle('is-flipped');
  });


  body { font-family: sans-serif; }

  .scene {
    width: 200px;
    height: 300px;
    border: 1px solid #CCC;
    margin: 40px 0;
    perspective: 600px;
  }

  .card {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    position: relative;
  }

  .card.is-flipped {
    transform: rotateY(180deg);
  }

  .card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    backface-visibility: hidden;
  }

  .card__face--front {
    background: red;
  }

  .card__face--back {
    background: blue;
    transform: rotateY(180deg);
  }

  .front_button{
    background:yellow;
    height:200px;
    width:100%;
    position:absolute;
    bottom:0px;
    left:0px;
    cursor: pointer;
  }

   .card.is-flipped  .card__face.card__face--front {
      display:none;
    }

this is my real problem, if you click on the yellow square, a click event is executed. when you flip the letter, this event is still running even though I'm in the back. if I put a display none on the front side this does not happen anymore. \ that's why I want to put display none on the front to avoid interaction with the elements of the front part, but I want some trick so that the display step will not be abrupt: none for the front card.

https://jsfiddle.net/etsb1jg9/1/

@Paulie_D thank you for wanting to help me, but note that I do not need to have my element with properties like "hidden" or "opacity: 0" directly I need to have the property display: none — yavg, Sep 07 '18 at 15:19
@Paulie_D I do not want to animate on the display: none property, but it is of vital importance for me that the front part is applied to the display: none when the back part is active. I do not know what trick I can do so that the user does not perceive this. the property that you say, will hide elements but I will still be able to interact with them in one way or another, I strictly need to use display: none. my idea is to apply an opacity animation and at the end add the display none when it is hidden, but I do not know how to do it. can you give me a hand please? — yavg, Sep 07 '18 at 15:24
The solution is remove the class that sets display none in css; .card.is-flipped .card__face.card__face--front { display:none; } — Nimitt Shah, Sep 07 '18 at 15:25
@NimitkumarShah I need the front part to be hidden as long as I have the back part as active. but I want to avoid that the front part is hidden while the animation is executed towards the back — yavg, Sep 07 '18 at 15:26
@Paulie_D this is my real problem, if you click on the yellow square, a click event is executed. when you flip the letter, this event is still running even though I'm in the back. if I put a display none on the front side this does not happen anymore. now you understand? that's why I want to put display none on the front to avoid interaction with the elements of the front part, but I want some trick so that the display step will not be abrupt: none for the front card. https://jsfiddle.net/bw2rvnfe/ — yavg, Sep 07 '18 at 15:41

Nimitt Shah · Accepted Answer · 2018-09-07T19:51:17.737

1

You can remove the css that sets display none; It will work

 .card.is-flipped  .card__face.card__face--front {
    z-index: -1;
  }

jsfiddle.net/bw2rvnfe/4

Thanks

edited Sep 07 '18 at 19:51

answered Sep 07 '18 at 15:26

Nimitt Shah

4,477
2
10
21

thanks, but I need the front part to be hidden (display:none)as long as I have the back part as active. but I want to avoid that the front part is hidden while the animation is executed towards the back – yavg Sep 07 '18 at 15:27
if you want to hide the front (red) card then what you gonna show there in start? – Nimitt Shah Sep 07 '18 at 15:28
I want to hide the red part (with a display: none), when the blue part is fully loaded. it is currently hidden before the blue part is completely loaded and this is my problem. – yavg Sep 07 '18 at 15:31
My solution works well then.. try this https://jsfiddle.net/etsb1jg9/14/ let me know if I still not getting your point.. – Nimitt Shah Sep 07 '18 at 15:32
this is my real problem, if you click on the yellow square, a click event is executed. when you flip the letter, this event is still running even though I'm in the back. if I put a display none on the front side this does not happen anymore. now you understand? that's why I want to put display none on the front to avoid interaction with the elements of the front part, but I want some trick so that the display step will not be abrupt: none for the front card. https://jsfiddle.net/bw2rvnfe/ – yavg Sep 07 '18 at 15:41
Oh got it.. try setting z-index -1 in the css instead of display none. .card.is-flipped .card__face.card__face--front { z-index:-1; } https://jsfiddle.net/bw2rvnfe/4/ – Nimitt Shah Sep 07 '18 at 15:45
z-index property specifies the stack order of an element. You can read more here.. https://www.w3schools.com/cssref/pr_pos_z-index.asp – Nimitt Shah Sep 07 '18 at 15:56
Update please the answer, for select this as the best – yavg Sep 07 '18 at 15:58
Default value of z-index for all elements is auto. So when you set it to -1, you are setting that element to underneath of all other elements. So when you see Blue element, the z-index is higher than the red one. So you can't click on the link of red element.. I hope this will help you! Thanks – Nimitt Shah Sep 07 '18 at 16:04

add the property "display: none" after n number of seconds achieving a smooth transition

1 Answers1