CSS classes conflicting

Question

I am trying to animate a card flipping face up and then fading out. I do this by adding a class 'flipped' on click and a second 'vanish' after a timeout of 2 seconds. However, as soon as the 'vanish' class is added, the card flips back face down. I don't understand why, as the 'flipped' class is still applied.

Here is my mark up:

<div class="grid-space">
    <div class="card">
      <div class="front-face">
        <img src="https://res.cloudinary.com/lwcqviihu/image/upload/v1512898858/Animals/Sloth_svg.svg"/>
        <p>sloth</p>
      </div>
      <div class="back-face"></div>
    </div>
</div>

The CSS (flipped and vanish classes marked)

    body {
      background: #333;
    }

    .grid-space {
      perspective: 1000;
      width: 200px;
      margin: auto;
    }

    .grid-space:hover {
      transform: scale(1.02);
      transition: 0.3s ease-in-out;
    } 

    .card {
      position: relative;
      padding-bottom: 100%;
      display: flex;
      border-radius: 1vw;
      transition: transform 0.4s ease-in-out, opacity 2s ease-in-out;
        transform-style: preserve-3d;
      cursor: pointer; 
    }

    .card p {
      color: inherit;
    }

/*****These are the classes applied to do the animation***********/

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

    .vanish {
      opacity: 0;
    }

/*****END**********************************************************/

    .front-face, .back-face {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 1vw;
      text-align: center;
      box-sizing: border-box;
    }

    .front-face {
      transform: rotateY(180deg);
      color: #EDCB7A;
      background: #487360;
      border-style: solid;
      border-width: 2px;
    }

    .back-face {
      /* background: #C7C6C4;
      border: 1px solid #EBD787; */
      background: #3A295C;
      border: 1px #EBD787 solid;
      z-index: 10;
    }

    .front-face > p {
      font-size: 3vmin;
      margin: 0;
      position: absolute;
      bottom: 5%;
      width: 100%;
      text-align: center;
    }

    .front-face > img {
      width: 90%;
      margin-top: 5%;
    }

And finally, the javascript:

window.onload = function() {
  var card = document.getElementsByClassName('card')[0];
  card.addEventListener('click', function() {
    this.className += " flipped";
    window.setTimeout(vanish, 2000);
  });

  function vanish() {
    card.className += " vanish";
  }
};

You can see the whole thing 'working' here: https://codepen.io/timsig/pen/MVavXv

Many thanks for any help.

Answer 1

There seems to be something odd hiding the revealed face when applying opacity to the parent.

I sinceriously don't know why that happens (if anyone has a clue, I'd really, really like to know), but an alternate approach would be to modify the faces instead of the card itself when you apply the .vanish class

.vanish > .back-face{
  visibility:hidden;
}

.vanish > .front-face{
  opacity:0
}

.front-face{
  transition:opacity 2s ease-in-out;
}

and of course, taking out the rule that applies opacity 0 to the .card

/*.vanish {
  opacity: 0;
}*/