CSS类冲突

Question

我正在尝试制作一张卡片正面朝上然后淡出的动画。我通过在点击时添加一个类“翻转”和在 2 秒超时后添加第二个“消失”来做到这一点。然而，一旦添加了“消失”类，卡片就会翻回正面朝下。我不明白为什么，因为“翻转”类仍然适用。

这是我的标记:

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

CSS(标记为翻转和消失的类)

    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%;
    }

最后，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";
  }
};

你可以在这里看到整个“工作”:https://codepen.io/timsig/pen/MVavXv

非常感谢您的帮助。

Answer 1

当对父级应用不透明度时，似乎有一些奇怪的东西隐藏了露出的脸。

我真的不知道为什么会这样(如果有人有线索，我真的非常想知道)，但另一种方法是在应用 .消失类

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

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

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

当然，去掉将不透明度 0 应用于 .card 的规则

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