1

me gustaría saber como puedo hacer para que al mostrar un div con *ngIf haga algún tipo de efecto como el transition en CSS por ejemplo el ngIf que estoy haciendo es ocultar un div

<span class="close-creategroups" (click)="closeTab()"><i class="fas fa-times-circle"></i></span>



closeTab() {
    this.filterIdentificador = "";
}

1 respuesta 1

5

Para conseguir este efecto con el *ngIf debes utilizar angular animations (que permiten definir animaciones para enter/leave de los elementos):

import { trigger, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'my-app',
  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({transform: 'translateX(100%)', opacity: 0}),
          animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
        ]),
        transition(':leave', [
          style({transform: 'translateX(0)', opacity: 1}),
          animate('500ms', style({transform: 'translateX(100%)', opacity: 0}))
        ])
      ]
    )
  ],
  template: `
    <button (click)="show = !show">toggle show ({{show}})</button>

    <div *ngIf="show" [@enterAnimation]>xxx</div>
  `
})
export class App {
  show:boolean = false;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.