css - 在实现平滑过渡的 n 秒后添加属性 "display: none"

Question

我正在尝试制作“翻转卡片”的效果，当我在前面单击时，我希望在 n 时间后 front div具有属性 display: none;

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

这是为了避免在您的背面处于事件状态时与 front 的元素进行交互。但是当 display: none 属性被应用时，它看起来很突兀，所以我希望它在 n 秒数之后应用，当它在后面并且用户没有意识到这一点

这是我的代码:

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

这是我真正的问题，如果你点击黄色方 block ，就会执行一个点击事件。当你翻转字母时，即使我在后面，这个事件仍在进行。如果我在正面放置一个 display none 就不会再发生这种情况。\这就是为什么我想将 display none 放在前面以避免与前面部分的元素交互，但我想要一些技巧，以便显示步骤不会突然:前面卡没有。

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

Answer 1

可以去掉设置display none的css；它会起作用

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

jsfiddle.net/bw2rvnfe/4

谢谢