[隐藏]中的动画淡入/淡出，淡出在休假时不起作用

Question

我正在尝试在[隐藏的]内部进行效果淡入，但是当要素隐藏时，效果不会显示，该元素会立即消失。

我尝试：

@Component({
  selector: 'app-confprecificacao',
  templateUrl: './confprecificacao.component.html',
  styleUrls: ['./confprecificacao.component.scss'],
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [   // :enter is alias to 'void => *'
        style({opacity:0}),
        animate(500, style({opacity:1})) 
      ]),
      transition(':leave', [   // :leave is alias to '* => void'
        animate(500, style({opacity:0})) 
      ])
    ])
  ]
})

我的模板：

<div [ngClass]="{'transition':loadingcadastro}" [hidden]="!loadingcadastro" [@fadeInOut] id="controlaloading" class="controleloading">
    <app-loading></app-loading>
</div>