Анимация затухания / затухания в [скрыто], затухание не работает в отпуске

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>