背面可见的卡片翻转：隐藏

Question

我将感谢有关如何在我的角度应用程序中实现此翻转功能的建议。我目前已经部分工作（请参阅 stackblitz 上的示例（单击查看示例）。我目前正在使用 backface-visibiity : hide css 属性来隐藏镜像显示 onflip，但我认为这隐藏了关闭按钮Dom，因此当您单击关闭按钮时，不会触发任何事件。 任何关于如何解决或以其他方式实现这一目标的意见或建议将不胜感激。 谢谢。

@Component({
  standalone:true,
  selector: 'app-root',
  template: `
  <div class = "parent" [@flip]="flip">
  <div class = "child-1">
    <app-front (flip)="updateFlip($event)"></app-front>
</div>
<div class = "child-2">
    <app-back (flip)="updateFlip($event)"></app-back>
</div>
</div>
  `,
  imports:[FrontComponent,BackComponent],
  animations: [
    trigger('flip', [
      state('false', style({
        transform: 'none'
      })),
      state('true', style(
        {transform: 'rotateY(180deg)'}
    )),
      transition('false <=> true', animate('500ms ease-in'))
    ])
  ]
})
export class App {
  flip = false;

  updateFlip($event:boolean){
    this.flip = $event
  }

CSS：

.parent{
    position: relative;
    backface-visibility: hidden;
   }
.child-1{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
   }
.child-2{
    position: absolute;
    top: 0;
    transform: rotateY(-180deg);
     width:100%;
   }

Answer 1

在 Angular 中，你总是有一个根组件，它显示其他角度组件，在本例中为

flip-card

组件：

<flip-card>
  <flip-card-front>
    <h2>This is card front</h2>
  </flip-card-front>
  <flip-card-back>
    <h2>This is card back</h2>
  </flip-card-back>
</flip-card>

使用

[ngClass]="toggleProperty ? 'flipped' : ''"

指令可以在

flip-card-front

和

flip-card-back

组件之间切换。

我在这里找到了一个旧的 Angular 15 项目，并将其更新为 Angular 19，因为组件模块的工作方式略有不同。

这里是Stackblitz

看一下并希望它有意义吗？