n秒后添加属性“ display：none”以实现平滑过渡

Question

我正在尝试制作“翻页卡”的效果，当我在正面单击时，我希望在n时间后front div具有属性{{1} }

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

这是我真正的问题，如果单击黄色正方形，则会执行click事件。当您翻动字母时，即使我在后面，该事件仍在运行。如果我不在前面放置显示器，则不会再发生这种情况。 \这就是为什么我要在前面不显示任何内容以避免与前面部分的元素进行交互，但是我想要一些技巧，以便显示步骤不会突然发生：对于前卡，不显示任何内容。

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

Answer 1

您可以删除设置为不显示的CSS；会起作用

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

jsfiddle.net/bw2rvnfe/4

谢谢