如何添加一个简单的卡片翻转动画

我正在创造一款单人游戏。到目前为止，我得到了大多数工作，但卡片翻转动画是一个痛苦的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;

CSS中的

类:

.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 */

相关内容

最新更新

热门标签：