我一直在尝试为 *ngIf 设置动画，但我注意到它只在第一页加载或刷新时设置动画

Question

我基本上是从父组件（专辑组件）路由到 musicList 组件。 musicList 组件获取存储在激活的路由器中的音乐数据，该路由器只是从解析器服务中解析它（尽管我尝试直接调用它但仍然存在相同的动画问题）。

使用 *ngIf 的模板在每次调用路由器上的各种 id 时添加和删除每个音乐数据，但仅在加载页面或刷新页面时设置动画。为什么会这样？

<h2>My Album</h2>
<ul class="crisisAlbum">
  <li *ngFor= "let crisisMusic of crisisAlbum" [class.selected]="crisisMusic === selectedCrisisMusic" (click)="onSelect(crisisMusic)"><a [routerLink]="['/crisis-center', crisisMusic.id]">
    <span class="badge">{{crisisMusic.id}}</span>{{crisisMusic.music}}</a>
  </li>
</ul>
<router-outlet ></router-outlet>
<app-message></app-message>

将我带到子组件（音乐列表组件）<Template>

<div class="g" @slide *ngIf="crisisMusic" >
  <div >
  <h2> {{crisisMusic.music | uppercase}} Details</h2>
  <div><span>id: </span>{{crisisMusic.id}}</div>
  <div >
    <label>name:
      <input [(ngModel)]="crisisMusic.music" #crisisSong placeholder="name" />
    </label>
  </div>
  <button (click)="save(crisisSong)">Save</button>
  <button (click)="back()">Back</button>
</div>
</div>

<Component>

import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs'
// import {music} from '../musicInterface'
// import { MusicService } from '../music.service';
import { crisis } from '../crisis'
import { ActivatedRoute, Router, Params } from '@angular/router';
import { switchMap, timeout, map } from 'rxjs/operators';
import { CrisisService } from '../crisis.service';
import { DialogService } from 'src/app/dialog.service';
import { trigger, query, state, style, transition, animate, stagger } from '@angular/animations';

@Component({
  selector: 'app-music-list',
  templateUrl: './music-list.component.html',
  styleUrls: ['./music-list.component.css'],
  animations: [
    trigger('slide', [
      transition(':enter', [
        style({transform: 'translateX(100%)', opacity: 0, zIndex:100}),
        animate('500ms')
      ]),
      transition(':leave', [
        style({transform: '*', opacity: '*', zIndex:100}),
        animate('1000ms',style({transform:'translateX(100%)',zIndex:200, opacity:0}))
      ])
    ]
    )]
})
export class crisisMusicListComponent implements OnInit {
  @Input() animat: boolean;
  show:boolean= false;
  // @Input() crisisMusic:crisis
  public crisisMusic: crisis;
  private crisisId: number;
  public crisisSong

  constructor(private crisisMusicService: CrisisService, public dialogService: DialogService, private route: ActivatedRoute, private router: Router) {

  }
  isShow(){
    console.log('yes')
    this.show= !this.show
  }


  ngOnInit() {
    this.route.data
      .subscribe((data: { crisis: crisis }) => {
        this.crisisId = data.crisis.id
        this.crisisMusic = data.crisis;
        this.crisisSong= data.crisis.music
        console.log(data.crisis)
      });

  }
  back() {
    this.router.navigate(['../', { id: this.crisisId, foo: 'foo' }], { relativeTo: this.route })
  }
  save() {

    this.crisisSong = this.crisisMusic.music;
    console.log(this.crisisSong)
    this.router.navigate(['../', { id: this.crisisId, foo: 'foo' }])
  }
  canDeactivate(): Observable<boolean> | boolean {
    // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
    if (!this.crisisMusic || this.crisisMusic.music === this.crisisSong) {
      return true;


    }
    // Otherwise ask the user with the dialog service and return its
    // observable which resolves to true or false when the user decides
    this.dialogService.confirm('Discard changes?').subscribe(d=>{
      if(d){
        this.save();
        // this.router.navigate(['/crisis-center',this.route.snapshot.paramMap.get('id')])
      }
    });
  }

}

请注意，数据是从解析器服务中获取的。

我希望元素在每次触发 *ngIf 时都能在删除和添加新专辑时进行动画处理。

Answer 1

将动画放在路由上：

<router-outlet @slide></router-outlet>

Answer 2

此转换将在进入或离开时发生。这意味着在这种情况下，当 ngIf 中的条件发生变化时。由于它只能评估为 true 或 false，因此它只能在 crisisMusic 从未定义变为已定义或相反时发生变化。默认情况下，它是未定义的，当第一组数据通过路由到达时，它会被定义。那是动画唯一发生的地方。所以你需要将你的 ngIf 或你的动画绑定到一些不同的条件，这些条件真正检查这个元素是否刚刚被添加或删除。

我一直在尝试为 *ngIf 设置动画，但我注意到它只在第一页加载或刷新时设置动画

I have been trying to animate an *ngIf but i noticed it only animates on the first page load or refresh

angular

angular-animations