如何让每次点击有动画的div时都会发生动画？

Question

我是 Angular 的初学者，我正在尝试开发一个简单而小的应用程序，该应用程序由健身房及其相应经理的系统组成，每个健身房都有一个教练名单。到目前为止，如果我点击某个培训师，信息（姓名、电话号码等）会显示在下方，对应于“detalles-entrenador”组件。这是 app-component.html 部分，其中调出了详细信息：

<div style= "margin-top: 10px;" class="col-md-7">
      <div *ngIf="centroElegido" class="list-group">
        <h3>Entrenadores del Centro: <i>{{ centroElegido.nombre }}</i></h3>
        <button *ngFor="let entrenador of getEntrenadoresDelCentroElegido()"
          class="list-group-item list-group-item-action"
          (click)="elegirEntrenador(entrenador)"
          ...</button>
      </div>

      <!-- Mostrar detalles del entrenador seleccionado -->
      <div class="col-md-12" *ngIf="entrenadorElegido" @fadeIn>
        <br>
        <app-detalle-entrenador [entrenador]="entrenadorElegido"
          (entrenadorEditado)="entrenadorEditado($event)"
          (entrenadorEliminado)="eliminarEntrenador($event)"
        ></app-detalle-entrenador>
      </div>

      <div *ngIf="centroElegido">
        <br>
        <button type="button" class="btn btn-outline-primary bi bi-plus-lg" (click)="aniadirEntrenador()"></button>
      </div>
    </div>

我在此组件中包含了一个动画，但问题是它仅在我第一次单击列表中的训练器时有效，从那时起，如果我单击另一个训练器，则不会应用动画。动画是：

const enterTransition = transition(':enter',[
  style({
    opacity: 0
  }),
  animate('1s ease-in', style({ opacity: 1 })),
]);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [trigger('fadeIn', [enterTransition])]
})

Answer 1

<div class="col-md-12" *ngIf="entrenadorElegido" @fadeIn [ngStyle]="{'opacity': showTrainerDetails ? 0 : 1}">
  </div>

<button *ngFor="let entrenador of getEntrenadoresDelCentroElegido()"
  (click)="elegirEntrenador(entrenador, true)"> </button>


showTrainerDetails = false; // New property

elegirEntrenador(entrenador: any, showDetails: boolean = false) {
  this.entrenadorElegido = entrenador;
  this.showTrainerDetails = showDetails; // Set the flag on click
}

在此方法中，单击训练器会设置 entrenadorElegido 并切换 showTrainerDetails。动画会触发，因为每次单击时不透明度样式都会发生变化。