如何在内存游戏中使用 css 转换旋转卡片

Question

我正在用Angular构建一个记忆游戏。我在下面附加了组件的逻辑、css 和 html。我正在尝试翻转卡片，但在线方法不起作用。关于如何做到这一点的任何建议？请注意，在卡的数据结构中，有一个 isFlipped 属性设置为 false。将不胜感激任何帮助，谢谢。

// angular
import { Component } from "@angular/core";
// services
import { CardService } from "../app/services/cards.service";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title: string = "the tech memory game";
  tagline: string = "Time to sharpen up those memory cells!";
  cards = [];
  total_cards_count: number = 3;
  prevCard = null;
  isProcessing: boolean = false;
  flippedCouplesCount: number = 0; 
  constructor(public cardService: CardService) {}
  ngOnInit() {
    this.cards = this.cardService.getCards();
    console.log(this.cards);
  }
  playGame(card, cardDiv) {
    if (this.isProcessing) return;
    // flip card
    card.isFlipped = !card.isFlipped;
    cardDiv.classList.add('flipped');
    // compare cards and check
    if (this.prevCard) {
      if (card.name === this.prevCard.name) {
        this.prevCard = null;
        this.flippedCouplesCount++; 
      } else {
        this.isProcessing = true;
        // if no match- flip cards in 1 sec
        setTimeout(() => {
          this.prevCard.isFlipped = false;
          card.isFlipped = false;
          this.isProcessing = false;
          this.prevCard = null;
        }, 1000);
      }
    } else {
      this.prevCard = card;
    }
    if (this.total_cards_count === this.flippedCouplesCount) {
      console.log('game over');
      
    }
  }
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* width: 100%;  */
    /* transform: rotateY(180deg); */
}
.front {
    position: absolute;
}

<!--The content below is only a placeholder and can be replaced.-->
<section>
  <div style="text-align:center">
    <h1>
      Welcome to {{ title }}!
    </h1>
    <h3>{{ tagline }}</h3>
    <!-- <img width="300" alt="Angular Logo" src="> -->
  </div>
  <!-- game board -->
    <div class="container">
      <div *ngFor="let card of cards" #cardDiv (click)="playGame(card, cardDiv)" class="cardholder">
          <img src="{{ card.img }}" class="front" *ngIf="card.isFlipped"/>
          <img src="{{ card.cover }}" class="back"/>
      </div>
    </div>
</section>

Answer 1

您将需要Angular动画和css动画的组合。根据需要调整以下演示：

演示

打字稿：

  ...
  animations: [
    trigger('flipCard', [
      state('true', style({
        transform: 'rotateY(180deg)'
      })),
      state('false', style({
        transform: 'rotateY(0)'
      })),
      transition('true => false', animate('800ms ease-out')),
      transition('false => true', animate('800ms ease-out'))
    ])
  ]

...
  flip(index) {
    this.cards[index].isFlipped = !this.cards[index].isFlipped;
  }

.HTML

<div class="container">
    <div *ngFor="let card of cards; let i=index" #cardDiv class="cardholder">
        <div class="card" (click)="flip(i)" [@flipCard]="card.isFlipped">
            <div class="card-title front">
                {{card.name}} Front
            </div>
            <div class="card-title back">
                {{card.name}} Back
            </div>
        </div>
    </div>
</div>

.CSS：

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 200px;
    width: 100%;  
    /* transform: rotateY(180deg); */
}
.card-wrapper {
    perspective: 800px;
}
.card {
    border-radius: 8px;
    position: relative;
    height: 200px;
    width: 120px;
    transform-style: preserve-3d;
}
.card-title {
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    text-align: center;
    border-radius: 8px;
    color: white;
    user-select: none;
    cursor: pointer;
    line-height: 100px;
    font-size:30px;
}
.front {
    background-color: #255C85;
}
.back {
    background-color: #ED254E;
    transform: rotateY(180deg);
}

Answer 2

如果卡片翻转，尝试使用[class.active]="card.isFlipped"添加类。将 CSS animate 绑定到这些节点子节点后：https://github.com/daneden/animate.css/tree/master/source/flippers翻转OutY和翻转InY延迟一半的动画时间。