jquery - WebKit 浏览器的 CSS 卡翻转动画会阻止链接正常工作

Question

我试图弄清楚如何创建一个卡片翻转动画，当您单击卡片正面的任意位置时触发该动画，并在鼠标离开时翻转回来。

我有基本的动画工作，但问题是卡片的两面都包含似乎被动画“阻止”的链接。右键单击链接有效，但直接单击链接只会触发动画。

我该如何修改才能使链接正确触发？

可通过 CodePen 获取该问题的现场演示。 。为了方便起见，下面也列出了代码。

HTML

<div class='flip'>
  <div class='card'>
    <div class='front face'>
      <a href='http://periphery.in'><h3>Rahul</h3></a>
    </div>
    <div class='back face'>
      <a href='http://github.com/O-I'><h3>O-I</h3></a>
    </div>
  </div>
</div>

CSS

.flip {
  -webkit-perspective: 800;
  height: 365px;
  width: 252px;
  position: relative;
  text-align: center;
  line-height: 200px;
}

.flip .card.flipped {
  -webkit-transform: rotatey(-180deg);
}

.flip .card {
  width: 100%;
  height: 100%;
  left: -4px;
  top: -4px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.75s;
  position: absolute;
  border: 1px solid black;
}

.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  z-index: 2;
}

.flip .card .front {
  position: absolute;
  z-index: 1;
  cursor: pointer;
}

.flip .card .back {
  -webkit-transform: rotatey(-180deg);
  cursor: pointer;
}

.back.face {
  overflow-y: scroll;
}

JQuery

$('.flip').click(function(){
  $(this).find('.card').addClass('flipped').mouseleave(function(){
    $(this).removeClass('flipped');
  });
  return false;
});

我在 Stack Overflow 上看到过类似的问题 question在这个 bug report ，但我仍然无法让我的具体示例发挥作用。任何正确方向的线索将不胜感激。谢谢!

Answer 1

我 fork 并修复了您的 CodePen(编辑:将其移至 JSbin，以便链接操作有效)。

Here's the awesomeness

CSS 更改:

h3 {
    display: inline;
}

要么这样，要么让它成为 <span>哈哈

Javascript:

$(document).on('click', '.flip', function(){
  $(this).find('.card').addClass('flipped').mouseleave(function(){
    $(this).removeClass('flipped');
  });
  return false;
});
$(document).on('click', 'a', function(evt) {
  var e = evt || window.event;
  var clickedOn = (e.currentTarget) ? e.currentTarget : e.srcElement;
  e.stopPropagation();
  window.location.href = clickedOn.href;
});