[英]CSS card flip animation for WebKit browsers prevents links from functioning
I'm trying to figure out how to create a card flip animation that triggers when you click anywhere on the front face of the card and flips back when the mouse leaves. 我试图弄清楚如何创建卡片翻转动画,该动画在您单击卡片正面的任意位置时触发,并在鼠标离开时向后翻转。
I have the basic animation working, but the problem is that both sides of the card contain links that seem to be 'blocked' by the animation. 我有基本的动画工作,但是问题是卡片的两面都包含似乎被动画“阻止”的链接。 Right-clicking on a link works, but directly clicking on one just triggers the animation.
右键单击一个链接是可行的,但是直接单击一个链接只会触发动画。
How would I go about modifying what I have to get the links to fire correctly? 我该如何修改必须正确启动链接的内容?
A live demo of the issue is available on CodePen . 该问题的实时演示可在CodePen上获得 。 Code is listed below for convenience, as well.
为方便起见,下面也列出了代码。
<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>
.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;
}
$('.flip').click(function(){
$(this).find('.card').addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
I've seen a similar issue discussed on this Stack Overflow question and in this bug report , but I'm still having trouble getting my specific example to work. 我已经在这个Stack Overflow 问题和此bug报告中看到了类似的问题,但是我仍然无法使我的特定示例正常工作。 Any leads in the right direction would be much appreciated.
任何在正确方向上的线索将不胜感激。 Thanks!
谢谢!
I forked and fixed your CodePen ( EDIT : moved it to JSbin so the link action would prove to work). 我分叉并修复了您的CodePen( 编辑 :将其移至JSbin,因此链接操作将证明是有效的)。
h3 {
display: inline;
}
Either that or make it a <span>
lol 要么使它成为
<span>
大声笑
$(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;
});
You need to stop the click event from propagating from your link to the card. 您需要停止点击事件从链接到卡片的传播。 Add this js code:
添加此js代码:
$('.flip a').on('click', function(e){
e.stopPropagation();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.