Как анимировать дочерний компонент в angular6? - PullRequest
Новая
       36

Как анимировать дочерний компонент в angular6?

0 голосов
/ 20 марта 2020

У меня есть приложение angular, в котором у меня есть родительский dialog, в котором я открываю свои child компоненты на основе условий. Вот мой parent.component.html

    <div class="ui-g-12 dialog-body" @fade>

  <span class="display-none" [ngClass]="{'display-block': active === 'add-customer'}">
    <app-customer-add [openFrom]="customerContext" [onSubmitData]="submit"
      [customerNameForCreate]="customerNameForCreate" (customerCreated)="customerCreated($event)"
      (customerCreatedForOther)="customerCreatedForOther($event)"
      (cancelCreatedForOther)="cancelCreatedForOther($event)"></app-customer-add>
  </span>

  <span class="display-none" [ngClass]="{'display-block': active === 'add-vehicle'}">
    <app-vehicle-add [openFrom]="vehicleContext" [inputCustomer]="customerForVehicle" [onSubmitData]="submit"
      (vehicleCreated)="vehicleCreated($event)" (createCustomer)="createCustomerFromOther($event)"
      (vehicleCreatedForOther)="vehicleCreatedForOther($event)"
      (cancelCreatedForOther)="cancelCreatedForOther($event)">
    </app-vehicle-add>
  </span>

  <span class="display-none" [ngClass]="{'display-block': active === 'add-appointment'}">
    <app-appointment [openFrom]="appointmentContext" [inputCustomer]="customerForAppointment"
      [appointmentData]="appointment" [onSubmitData]="submit" [inputEstimate]="estimateForAppointment"
      (appointmentCreated)="appointmentCreated($event)" (createCustomer)="createCustomerFromOther($event)"
      (createVehicle)="createVehicleFromOther($event)">
    </app-appointment>
  </span>

</div>

Вот мой код анимации в моем parent.component.ts

 animations: [
trigger('fade', [
  transition('void => *', [
    style({ opacity: 0 }),
    animate(3000, style({opacity: 1}))
    ])
  ])
 ]

Но проблема в том, что дочерний компонент не загружается в родительском с animation. Должен ли я также написать анимацию в своих дочерних компонентах?

Я хочу открыть свой дочерний компонент с постепенным исчезновением animation в родительском компоненте.

...