How to make an animation happen everytime I click on a div that has the animation?

Question

Im begginer on Angular and Im trying to develop a simply and little app which consists on a system of gym's with their corresponding managers, where each gym has a list of trainers. Up to now, if I click on a trainer, the information (name, surname, phone number, etc) is displayed underneath, which corresponds to the "detalles-entrenador" component. This is the app-component.html section where details are called out:

<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>

I have included in this component an animation, but the problem is that it only works for the first time I click on a trainer in the list, from then on if I click on another trainer the animation is not applied. The animation is:

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])]
})