为这个 JS 纸牌游戏添加翻牌动画？答案

【问题标题】：Adding a card flip animation to this JS card game?为这个 JS 纸牌游戏添加翻牌动画？
【发布时间】：2018-11-27 11:15:17
【问题描述】：

我正在玩this card game，我想添加一个卡片翻转动画。

我已经在谷歌上搜索了答案，但大多数解决方案都参考 jquery（我不想只为 1 个动画实现）或 CSS3 (I liked this example)。运气不好。

js游戏使用如下（来自cardgamecore.js）：

playingCard.redrawCardImage()强制重绘一张牌

playingCard.showFace(bool: face) 将卡片设置为面朝上或面朝下，并在需要时重新绘制。 true = 面朝上，false = 面朝下。

playingCard.prototype.redrawCardImage = function () {
    // Set or change the image showing on the card face
    if( !this.faceImage || !this.cardSet.backImage ) { return; }
    // Bug in Firefox - alt attributes do not change unless they are made _before_ an SRC change
    this.cardImage.setAttribute('alt',this.wayup?(this.cardSet.cardNames[this.number-1]+' '+this.suit):this.cardSet.cardWord);
    this.cardImage.src = this.wayup ? this.faceImage : this.cardSet.backImage;
};

playingCard.prototype.showFace = function (oWhich) {
    // Used to flip a card over
    if( this.redrawNewImage != oWhich ) {
        this.wayup = oWhich;
        this.redrawCardImage();
    }
};

因此，当卡片显示其背面时，则为 playingCard.showFace = false。当您单击它时，playingCard.showFace = true 并重新绘制图像。此时卡片应该有一个漂亮的翻转动画。

但是怎么做呢？

【问题讨论】：

您喜欢的 CSS3 示例遇到了哪些问题？
嗯，它更像是在哪里添加代码以使其工作。像addClass X（X 有 css3 翻转动画）这样的东西就足够了吗？如果就这么简单，我应该把它放在showFace 或redrawCardImagefunction 中吗？
加个类就这么简单，我觉得在showFace里会更好。我不确定是否不再需要 redrawCardImage，因为您可以在 css 中同时拥有正面和背面图像，而不显示卡片的背面。

标签： javascript css animation css-animations

【解决方案1】：

你要google搜索的是“css 3翻转动画”

http://davidwalsh.name/demo/css-flip.php

【讨论】：

【解决方案2】：

我也在玩纸牌游戏……

首先你可以这样写你的卡片：

<div class='card' >
   <div class='faces'>
       <div class='face front'> Hello</div>
       <div class='face back'>Goodbye</div>
   </div>
</div>

两个面都在你的 html 中占了，但是 css 只会显示一个：

.card {
  -webkit-perspective: 800;
   width: 50%;
   height: 300px;
   position: relative;
   margin: 3px;
   float:left; /*if you want more than one card in a line*/

}
.card .faces.flipped {
  -webkit-transform: rotatey(-180deg); /* this style will help the card to rotate */
}
.card .faces {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d; /* This is a 3d transformation */
  -webkit-transition: 0.5s;/*the animation last 0.5secs*/
}
.card .faces .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ; /*hides the back of the card until transform*/
  z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
}
.card .faces .front {
  position: absolute;
  z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.card .faces .back {
  -webkit-transform: rotatey(-180deg); /*allows the flip to the back of the card*/
  background-image: url("image.jpg"); /*background image for the back if you want*/
  background-size:100%;
  color:white;
  border:1px solid black;
}

剩下要做的就是添加“翻转”类。所以也许不是重绘。

   $(".card").on('click',function(){
      $(this).children('.faces').toggleClass('flipped');
  });

这是FIDDLE

【讨论】：

【解决方案3】：

联系了脚本的作者，他告诉我如果不重写大部分代码，在当前脚本中是不可能的。所以这个问题可以结束了。非常感谢您尝试帮助我。

【讨论】：