Tengo el siguiente elemento emergente en una aplicación Angular 12:
<div class="window" [hidden]="!active" (clickOutside)="close()"> <ng-content select="[window]"></ng-content> </div>¿Es posible aplicar una transición CSS que el DIV muestra/oculta?
Estaba considerando cambiar su opacidad.
Creo que es mejor usar una animación angular. Es más flexible:
Este es uno que estoy usando:
import { trigger, state, style, transition, group, animate } from '@angular/animations'; export const FadeInOutAnimation = trigger('fadeInOut', [ state('in', style({ 'opacity': '1', })), state('out', style({ 'opacity': '0', })), transition('in => out', [ group([ animate('600ms ease-in-out', style({ 'opacity': '0' })), ]) ]), transition('out => in', [ group([ animate('600ms ease-in-out', style({ 'opacity': '1' })), ]) ]), ]);Y úsalo:
@Component({ selector: 'app-popup', templateUrl: './popup.component.html', styleUrls: ['./popup.component.scss'], animations: [ FadeInOutAnimation ] }) export class PopupComponent implements OnInit { constructor() { } ngOnInit() { } @Input() dialogVisible: boolean; } <div class="popup-background" [@fadeInOut]="dialogVisible"></div> <div class="popup-content form-control-normal" [@fadeInOut]="dialogVisible"> <ng-content></ng-content> </div> Pero creo que aún debe agregar display: block y display: none a los estados.
Establecer los estilos en css:
.fade-out { visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 1000ms; } .fade-in { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 1000ms; }Y aplique la clase en el HTML del componente emergente:
<div class="container" [class]="active ? 'fade-in' : 'fade-out'">Compruebe este Stackblitz: https://stackblitz.com/edit/angular-ivy-5whet6?file=src/app/popup/popup.component.html