javascript - 单击时的CSS翻转动画

Question

我正在关注 example David Walsh提供制作翻转动画。这一切都在悬停时起作用，但是，我想在点击时翻转元素，而不是在悬停时翻转。

下面的代码可以在悬停时翻转元素，但是，我想使用 javascript/jquery 来实现它。我尝试了很多不同的方法，但无法弄清楚如何做到这一点。

.flip-container {
    perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
    width: 320px;
    height: 480px;
}
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.front {
    z-index: 2;
    transform: rotateY(0deg);
}
.back {
    transform: rotateY(180deg);
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            1
        </div>
        <div class="back">
            2
        </div>
    </div>
</div>

Answer 1

https://jsfiddle.net/pf4aemn7/ HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      1
    </div>
    <div class="back">
      2
    </div>
  </div>
</div>

CSS

.flip-container {
  perspective: 1000px;
}

.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}

JS

$(document).on("click", ".flip-container", function () {
    $(this).toggleClass('hover');
});