web-dev-qa-db-fra.com

angular 6 * ngIf, la transition ne fonctionne pas

Le projet présente deux variantes d'animation.

Option d'animation 1, déclencheur ('animationOption1')
Fonctionne sans se plaindre.

Option d'animation 2, déclencheur ('animationOption2')
la transition ne fonctionne pas ici.

Vérifiez ce projet en ligne sur StackBlitz.com

app.component.html

<h1>Animation Option 1</h1>
<div (click)="changeDivState()"
     [@animationOption1]="clickedDivState"
>Click Me
</div>

<h1>Animation Option 2</h1>
<button (click)="toggleMenu()">Click Me</button>
<ul *ngIf="isMenuOpen"
    [@animationOption2]="isMenuOpen ? 'open': 'close'"
>
  <li>Menu Item 1</li>
  <li>Menu Item 2</li>
  <li>Menu Item 3</li>
</ul>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('animationOption1', [
      state('start', style({
        backgroundColor: 'yellow',
        width: '150px',
        height: '150px'
      })),
      state('end', style({
        backgroundColor: 'green',
        width: '300px',
        height: '300px'
      })),
      transition('start => end', animate(1500)),
      transition('end => start', animate('800ms 0.5s ease-out'))
    ]),
    trigger('animationOption2', [
      state('close', style({
        opacity: 0,
        backgroundColor: 'yellow'
      })),
      state('open', style({
        opacity: 1,
        backgroundColor: 'green'
      })),
      transition('close <=> open', animate(3000)),
    ])
  ]
})
export class AppComponent {
  isMenuOpen = false;

  clickedDivState = 'start';

  changeDivState() {
    this.clickedDivState = 'end';
    setTimeout(() => {
      this.clickedDivState = 'start';
    }, 3000);
  }

  toggleMenu(): void {
    this.isMenuOpen = !this.isMenuOpen;
  }
}

La recherche sur Google n'a pas abouti à une solution.

angularanimationtransition
6
ZoomAll

Pour que cela fonctionne, vous devrez supprimer le *ngIf="isMenuOpen" sur le <ul>. Angular ne peut pas calculer la transition entre les états closed/open car l'élément n'existe tout simplement pas lorsque isMenuOpen est false.

Voici un StackBlitz montrant l'animation en action avec *ngIf supprimé.

Vous pouvez également utiliser les états entrée/sortie à utiliser avec *ngIf. Cela ressemblerait à ceci:

trigger('animationOption2', [      
  transition(':enter', [
    style({ backgroundColor: 'yellow' }),
    animate(300)
  ]),
  transition(':leave', [
    animate(300, style({ backgroundColor: 'yellow' }))
  ]),
  state('*', style({ backgroundColor: 'green' })),
])

Voici un StackBlitz en action.

12
Alexander Staroselsky