CSS classes conflicting - css

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;
}*/

Answer 2

I think I know why it's happening. When .card's opacity is being set to 0 because of .vanish, it's setting the opacity of its default state since the opacity style is being set on .card itself.
I fixed it by moving the opacity styles to .front-face since that's the side you want to fade out.
.card {
transition: transform 0.4s ease-in-out;
}
.vanish .front-face {
opacity: 0;
}
.front-face {
transition: opacity 2s ease-in-out;
}