I'm trying to put a fadein / fadeout effect, but it's only working fadeIn, when hide happens the element disappears instantly.
I tried:
@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>
e:
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 does not happen.