Javascript Angular 4动画正在init组件上执行

当执行使用动画的组件时，动画正在执行，与动画状态处于“显示无”相同

显示此gif：

打开组件时，模态中的动画效果会更好，我希望不是这样

救救我，普雷埃斯

组件技术

trigger('openModal', [
  state('true', style({
    display: 'block',
    'transform': 'scale(1)'
  })),
  state('false', style({
    display: 'none',
    'transform': 'scale(0)'
  })),
  transition('* => *', animate('.2s'))
]),

openCancelFavorite: boolean = false;

component.html

 <div [@openModal]="openCancelFavorite" class="onbusca-favorite-remove">
    <div class="row onbusca-row">
      <div class="ml-auto col-auto">
          <i (click)="openCancelFavorite = false" class="fa fa-close onbusca-login-close"></i> 
      </div>
    </div>

      <p class="not-p onbusca-favorite-remove-message">Você tem certeza que quer remover este produto dos favoritos ?</p>

    <div class="onbusca-favorite-buttons">
      <button class="btn btn-primary">Sim, remova</button>
      <button (click)="openCancelFavorite = false" class="btn btn-outline-primary">Cancelar</button>
    </div>
</div>

---

我相信您只需要在默认情况下将类的显示设置为“无”

因此，添加显示：无；要删除onbusca收藏夹，请执行以下操作：

.onbusca-favorite-remove {
    display: none;
}

否则，可以在*ngIf上切换动画，如下所示：

将动画更改为：

将模板更改为：

---

对不起，我不明白！我看不到GIF。。。。你想要切换动画吗？但是，真的不需要初始化组件

trigger('openModal', [
state(':enter', style({
    display: 'block',
    'transform': 'scale(1)'
})),
state(':leave', style({
    display: 'none',
    'transform': 'scale(0)'
})),
transition('* => *', animate('.2s'))
]),

openCancelFavorite: boolean = false;

<div *ngIf="openCancelFavorite" [@openModal] class="onbusca-favorite-remove"> ... </div>