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

Question

我正在创建一个单独的游戏。到目前为止，我已经完成了大部分工作，但卡片翻转动画令人头疼。

参见 this fiddle (它可能有点慢，因为整个游戏代码都在里面)

当您拖放卡片时，卡片的背面会替换为正面。这是在这部分代码中完成的:

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黑色或红色。

现在当这个 Action 发生时，我想添加一个漂亮的翻转动画。

我试过网络上的一些教程，但都没有给我一个可行的解决方案(主要是卡片开始表现怪异或游戏停止运行)。

我能得到的最接近的是添加:

-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>>>
}

然而，这导致了一些奇怪的 Action (尽管卡片正在翻转):

1. 卡片翻转，但在图像/正面已经显示之后
2. 所有卡片都是镜像的
3. 卡片的拖动/处理区域太远了

那么如何添加漂亮的卡片翻转动画呢？希望有人能帮助我。

编辑:

通过改变 this.element.addClass('container').append('<div class="downturned">');至 this.element.addClass('container').append('<div class="downturned">').append('<div class="hiddencardfront">');在 JS 部分，我可以创建一个额外的空 div，(我认为我需要卡片翻转动画)，但我仍然无法使其工作

Answer 1

我想有几种方法可以做到这一点。但我想我建议采用仅使用一个元素的老式方法。本质上，因为它是一个 2D 对象，正面和背面永远不会同时显示，并且卡片会在某个点“消失”。所以我们可以把动画一分为二。 “隐藏”卡片(这里我们可以将宽度设置为零)。将图像更改为另一张卡片，然后再次“显示”卡片(再次从零动画到原始宽度)。所以如果我们使用 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);
}

Demo

所以也许外观不是您想要的，但可以只用一个元素来制作翻转动画。