Angular 2+结合ngIf实现平滑卡片翻转动画失效问题排查

问题分析 #

当前实现仅为新进入的卡片面添加了动画，未同步处理离开面的退场动画，且动画逻辑未匹配卡片整体翻转的视觉需求，导致切换时出现元素突兀替换的效果，无法达到目标的平滑翻转。

修正方案 #

1. 调整动画触发器：同时处理元素的入场（void => show）和退场（show => hide）动画，让前后卡片面的翻转动作同步，模拟整体卡片翻转效果。
2. 绑定动画状态：将动画状态与front变量关联，确保切换时触发正确的动画过渡。
3. 优化CSS布局：确保前后卡片面完全重叠，为翻转动画提供正确的视觉基础。

修改后的完整代码 #

HTML

<div class="tp-wrapper">
  <div class="tp-box" (click)="toggleFlip()">
    <div class="tp-box__side tp-box__front" *ngIf="front" [@flipState]="front ? 'show' : 'hide'">Front</div>
    <div class="tp-box__side tp-box__back" *ngIf="!front" [@flipState]="!front ? 'show' : 'hide'">Back</div>
  </div>
</div>

TypeScript

import { Component, OnInit } from '@angular/core';
import {
  trigger,
  state,
  style,
  transition,
  animate,
  keyframes,
} from '@angular/animations';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css'],
  animations: [
    trigger('flipState', [
      state('show', style({
        transform: 'rotateY(0deg)',
        opacity: 1,
        backfaceVisibility: 'hidden'
      })),
      state('hide', style({
        transform: 'rotateY(180deg)',
        opacity: 0,
        backfaceVisibility: 'hidden'
      })),
      // 正面退场动画：从0°翻转到180°并消失
      transition('show => hide', [
        animate('600ms ease-out', keyframes([
          style({ transform: 'perspective(400px) rotateY(0deg)', opacity: 1, offset: 0 }),
          style({ transform: 'perspective(400px) rotateY(90deg)', opacity: 0.5, offset: 0.5 }),
          style({ transform: 'perspective(400px) rotateY(180deg)', opacity: 0, offset: 1 })
        ]))
      ]),
      // 背面入场动画：从180°翻转到0°并显示
      transition('void => show', [
        animate('600ms ease-in', keyframes([
          style({ transform: 'perspective(400px) rotateY(180deg)', opacity: 0, offset: 0 }),
          style({ transform: 'perspective(400px) rotateY(90deg)', opacity: 0.5, offset: 0.5 }),
          style({ transform: 'perspective(400px) rotateY(0deg)', opacity: 1, offset: 1 })
        ]))
      ])
    ]),
  ],
})
export class CardComponent implements OnInit {
  constructor() {}

  front = false;

  ngOnInit() {}

  toggleFlip() {
    this.front = !this.front;
  }
}

SCSS

.tp-wrapper {
  perspective: 800px;
}

.tp-box {
  position: relative;
  width: 200px;
  height: 100px;
  margin: 3rem auto;
  transform-style: preserve-3d;
}

.tp-box__side {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.tp-box__front {
  background: green;
}

.tp-box__back {
  background: #23262d;
}

效果说明 #

修改后，点击卡片时，正面会平滑翻转至180°并消失，同时背面从180°翻转至0°显示，两者动画同步进行，完美匹配目标的平滑卡片翻转效果。

内容的提问来源于stack exchange，提问作者Parth Developer