Angular animation only works in the "enter" transition

Question

I’m trying to put a fadein/fadeout effect, but it’s only working the fadein, when it happens the element disappears instantly.

I tried to:

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

My template:

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

I switched to:

<div [@hideShowAnimator]="loadingcadastro" id="controlaloading" class="controleloading">
    <app-loading></app-loading>
</div>

and:

trigger('hideShowAnimator', [
    state('true' , style({ opacity: 1 })), 
    state('false', style({ opacity: 0 })),
    transition('0 => 1', animate('.5s')),
    transition('1 => 0', animate('.5s'))
])

But now fadein doesn’t happen.