如何添加一个简单的卡片翻转动画
How to add a simple card flip animation?
我正在创造一款单人游戏。到目前为止，我得到了大多数工作，但卡片翻转动画是一个痛苦的a**。
看这个小提琴(它可能有点慢，因为整个游戏代码都在里面)
当你拖放一张卡片时，卡片的背面将被正面取代。这是在这部分代码中完成的:
upturn: function () {
with(this) {
if (is_downturned()) {
element.children('.downturned')
.removeClass('downturned').addClass(_SUITS[_suit()].color)
.append('<img height="80px" width="50px" border="0" src="http://mauricederegt.com/test/solitaire/cards/' + _RANKS[_rank()] + '' + _SUITS[_suit()].symbol + '.jpg">') //NEW
element.addClass(_scope());
if (element.hasClass('ui-draggable-disabled')) {
element.draggable('enable');
} else {
element.draggable({
containment: '#field',
revert: 'invalid',
revertDuration: 200,
zIndex: 99
});
}
if (!element.hasClass('ui-droppable-disabled')) {
element.droppable($.extend(DROPPABLE_OPTIONS, {
accept: _tableau_pile_scope()
}));
}
}
}
}
基本上它删除卡(.removeClass('downturned'))的背面，并添加一个新的类(.addClass(_SUITS[_suit()].color))，其中suits是鹿，三叶草等和color是黑色或红色。
现在，当这个动作发生时，我想添加一个漂亮的翻转动画
我在网上玩了一些教程，但没有给我一个有效的解决方案(主要是卡开始表现奇怪或游戏停止工作)。
我能得到的最接近的是加上:
-webkit-perspective: 600px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);
/* -- transition is the magic sauce for animation -- */
-webkit-transition: 0.6s;
类:
.red,
.black {
cursor: pointer;
<<<code added here>>>
}
然而，这导致了一些奇怪的动作(尽管卡片是翻转的):
- 卡片翻转，但在图像/正面已经显示后
- 所有卡都是镜像的
- 卡片的拖拽/手柄区域偏离
我如何添加一个漂亮的翻牌动画呢?希望有人能帮帮我。
编辑:通过在JS部分将this.element.addClass('container').append('<div class="downturned">');更改为this.element.addClass('container').append('<div class="downturned">').append('<div class="hiddencardfront">');，我可以创建一个额外的空div(我认为我需要卡片翻转动画)，但我仍然无法使其工作
我想有几种方法可以做到这一点。但我想我还是建议用老式的方法，只使用一个元素。本质上，因为它是一个2D对象，正面和背面永远不会同时显示，并且会有一个卡片"消失"的点。所以我们可以把动画分成两部分。"隐藏"卡片(这里我们可以将宽度动画为0)。将图像更改为另一张卡片，然后再次"显示"该卡(再次从零动画到原始宽度)。如果我们使用jQuery, html为
<img class="card" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />
jQuery将看起来像这样:
var CARDWIDTH = 50;
function turnCompatible(elem, src) {
$(elem).animate({
width: 0, //animate to zero
marginLeft: CARDWIDTH / 2,
marginRight: CARDWIDTH / 2
}, function () {
this.src = src //change the image
$(this).animate({
width: CARDWIDTH, //show the image again
marginLeft: 0,
marginRight: 0,
})
})
}
$(".card").click(function(){
turnCompatible(this, src)
})
这或多或少是可行的。虽然动画可以更好地改进，例如使用CSS转换和动画，但这个解决方案将与不支持CSS转换的浏览器(主要是IE)兼容。IE<10)。然后你可以输入
function turnCSS(elem, src) {
$(elem)
.addClass("flipping")
.bind("transitionend webkittransitionend", function () { //should add more prefixes
this.src = src;
$(this)
.unbind("transitionend webkittransitionend")
.removeClass("flipping")
})
}
和下面的CSS
.card {
width:50px;
height:80px;
-webkit-transition:-webkit-transform 0.5s;
transition:transform 0.5s;
background:#FF0;
}
.flipping {
transform: translate(0, 20px) rotateY(90deg);
-webkit-transform: translate(0, 20px) rotateY(90deg);
}
所以也许外观不是你想要的，但它是可能的翻转动画只有一个元素
我认为我遇到的最大问题是，当这是构建时，没有翻转动画被考虑。所以只有1个Div，需要更多的Div才能使其工作。此外，使用的拖放代码是旧的，并且与动画代码中断。
我想唯一的解决办法就是从头开始，这次要考虑动画。
感谢你的帮助和给出的解决方案，但我认为应该重新开始
问候
试试这个
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst1 {
from {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
@-webkit-keyframes myfirst2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
}
/* Standard syntax */
@keyframes myfirst1 {
from {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
@keyframes myfirst2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
}
@-webkit-keyframes mylast1 {
from {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
@-webkit-keyframes mylast2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
}
@keyframes mylast1 {
from {
-webkit-transform : rotateY(0deg);
-moz-transform : rotateY(0deg);
-ms-transform : rotateY(0deg);
transform: rotateY(0deg);}
to {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
}
@keyframes mylast2 {
from {
-webkit-transform : rotateY(90deg);
-moz-transform : rotateY(90deg);
-ms-transform : rotateY(90deg);
transform: rotateY(90deg);}
to {
-webkit-transform : rotateY(180deg);
-moz-transform : rotateY(180deg);
-ms-transform : rotateY(180deg);
transform: rotateY(180deg);}
}
</style>
<script>
$(document).ready(function()
{
$("#btn2").hide();
$("#btn1").click(function(){
$("#btn1").hide();
$("#box1").css({ 'z-index':'2',
'-webkit-animation': 'myfirst1 5s',
'animation': 'myfirst1 5s'
});
$("#box2").css({ 'z-index':'0' ,
'-webkit-animation': 'mylast1 5s',
'animation': 'mylast1 5s'
});
setTimeout(function(){
$("#box1").css({ 'z-index':'0',
'-webkit-animation': 'myfirst2 5s',
'animation': 'myfirst2 5s'
});
$("#box2").css({ 'z-index':'2' ,
'-webkit-animation': 'mylast2 5s',
'animation': 'mylast2 5s'
});
}, 5000);
setTimeout(function(){$("#btn2").show();}, 10000);
});
$("#btn2").click(function(){
$("#btn2").hide();
$("#box2").css({ 'z-index':'2',
'-webkit-animation': 'myfirst1 5s',
'animation': 'myfirst1 5s'
});
$("#box1").css({ 'z-index':'0',
'-webkit-animation': 'mylast1 5s',
'animation': 'mylast1 5s'
});
setTimeout(function(){
$("#box2").css({ 'z-index':'0',
'-webkit-animation': 'myfirst2 5s',
'animation': 'myfirst2 5s'
});
$("#box1").css({ 'z-index':'2',
'-webkit-animation': 'mylast2 5s',
'animation': 'mylast2 5s'
});
}, 5000);
setTimeout(function(){$("#btn1").show()}, 10000);
});
});
</script>
</head>
<body>
<button id="btn1">flip</button>
<button id="btn2">Reset</button>
<div id="box1" style="position:fixed;background:#98bf21;height:100px;width:100px;margin:6px;">
</div><div id="box2" style="position:fixed;background:#bf2198;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>
在这里，我刚刚动画了两个div保持背靠背(你可以用必要的图像替换它，设置位置并把东西放入函数中以减少代码。这是我特意为你做的。所以我没有优化它，所以我要求你自定义来满足你的要求。
关于你对CSS 3d转换的三个问题。
- 卡片翻转，但在图像/正面已经显示后
- 所有卡都是镜像的
- 卡片的拖拽/手柄区域偏离
对于点1 &2添加:
-webkit-backface-visibility:hidden; /* Chrome, Safari, Opera */
backface-visibility:hidden;
元素居中使用:
transform-origin:50% 50%;
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform-origin:50% 50%; /* Chrome, Safari, Opera */
相关文章：
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- CSS3卡翻转动画，检测是否不支持
- 卡片翻转动画InternetExplorer11
- 在悬停Jquery/cs3时通过翻转动画更改文本
- 翻转动画在Firefox上不起作用
- Jquery 翻转卡动画，用于翻转切换事件
- 如何获得CSS3翻转动画到IE9
- 使用 Javascript 在 CSS3 中触发翻转动画
- 如何获得下一页/上一页的页面翻转动画
- 用动画翻转文本
- 交换两个翻转动画潜水
- 如何改变CSS翻转动画按钮点击
- CSS翻转动画点击
- 如何添加一个简单的卡片翻转动画
- 为什么我的翻转动画不工作在chrome和safari浏览器
- 在这个JS纸牌游戏中添加一个纸牌翻转动画
- 翻转动画多个DIV's
- CSS翻转动画
- 用Javascript翻转动画
