javascript - 在点击而不是悬停时实现翻页卡片

Question

我已经实现了一个 css flipcard 效果，它可以在悬停时使用 css。请参阅下面的 CSS 代码。但是我想通过使用 jQuery 来实现点击时的翻页卡片效果。我已经尝试了一切，但无法弄清楚。

这是我认为可行的 javascript。

$('.flip-container .flipper').click(function(){
    $(this).css('transform, rotateY(180deg)');
});

请参阅下面的悬停代码。

html

<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
    </div>
    <div class="back">
      <p>You won</p>
    </div>
  </div>
</div>

CSS

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container, .front, .back {
  width: 250px;
  height: 250px;
}

/* flip speed */
.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  background-color: #fff;
}


.artist-1 {
  background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
  background-size: cover; 
}

Answer 1

要完成这项工作，您需要删除 CSS 中 .flip-container 元素上的 :hover 规则:

/* .flip-container:hover .flipper, */
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

然后在您的 JS 中，您需要在单击元素时切换 hover 类:

$('.flip-container .flipper').click(function() {
    $(this).closest('.flip-container').toggleClass('hover');
    $(this).css('transform, rotateY(180deg)');
});

Working example

请注意，现在也可能需要更改 hover 中的类名，否则以后维护代码时可能会造成混淆