javascript - Angular6 - แอนิเมชันเมื่อเปลี่ยนค่า

ฉันค้นหาใน Google ว่าจะทำในสิ่งที่ฉันอยากทำอย่างไรแล้วลองทำหลายอย่างแต่ก็ไม่ได้ผล และฉันพบว่ามีบทเรียน AngularJS มากมายแต่ไม่ใช่ Angular6.. ดังนั้นฉันหวังว่าคุณจะสามารถช่วยฉันได้

ฉันต้องการทำเอฟเฟกต์จางเมื่อค่าของอาร์เรย์ของฉันเปลี่ยนไป (เมื่อคลิก) ดังนั้นฉันจึงดาวน์โหลด ng-animate แต่ก็ไม่ได้ให้พฤติกรรมที่ฉันกำลังหามา ขณะนี้ ฉันมีสองคอมโพเนนต์ ดังนั้นอันแรก:

HTML :

 <div style="text-align: center; margin: 20px 0">
      <div class="buttonSelector" *ngFor="let select of buttonSelector" (click)="getSelectArray(select.title)"
           [ngClass]="{'selected': select.title === selectedArray.title.toUpperCase() }">
        <p>{{ select.title }}</p>
      </div>
    </div>

    <app-infoapp [selectedArray]="selectedArray"></app-infoapp>

ตรงนั้น ผมเปลี่ยน selectedArray ของผมโดยการส่งตัวแปรไปที่ getSelectArray() แล้วผมส่งมันไปที่คอมโพเนนต์ 'app-infoapp' ของผม ในคอมโพเนนต์ 'app-infoapp' ของผม เราสามารถพบสิ่งนี้:

import {Component, Input, OnInit} from '@angular/core';
import { trigger, transition, useAnimation } from '@angular/animations';
import {bounce, fadeIn} from 'ng-animate';

@Component({
  selector: 'app-infoapp',
  templateUrl: './infoapp.component.html',
  styleUrls: ['./infoapp.component.css'],
  animations: [
    trigger('fade', [transition('* => *', useAnimation(fadeIn, {delay: 0.2}))])
  ]
})
export class InfoappComponent implements OnInit {

  @Input() selectedArray;
  fade: any;

  constructor() {
  }
}

ดังนั้นตอนนี้เมื่อฉันรีเฟรชหน้าของฉัน คอมโพเนนต์จะค่อย ๆ เลือนหายไป ซึ่งเจ๋งดี แต่เมื่อฉันเปลี่ยนอาเรย์ของฉันโดยการคลิกที่ปุ่มเพื่อส่งอาเรย์อีกชุดไปยังคอมโพเนนต์ 'app-infoapp' มันก็ไม่ทำแอนิเมชันอีกครั้ง

ฉันหวังว่าฉันอธิบายชัดเจนและว่าคุณจะสามารถช่วยฉันได้

ถ้าคุณต้องการข้อมูลเพิ่มเติมหรือถ้าฉันพูดไม่ชัดเจน บอกฉันได้เลย ฉันจะตอบให้เร็วที่สุดเท่าที่จะทำได้

ขอบคุณ

คำตอบ #1

ฉันลองตัวอย่างเดียวกันที่ฉันแนะนำให้คุณ (kdechant.com/blog/angular-animations-fade-in-and-fade-out) กับโค้ดตัวอย่างของคุณแล้ว และมันทำงานได้:

นำเข้า BrowserAnimationsModule ในโมดูลแอปพลิเคชัน (app.module.ts):

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [...],
  imports: [BrowserAnimationsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

parent.component.html

<div style="text-align: center; margin: 20px 0">
  <div *ngFor="let select of buttonSelector" (click)="getSelectArray(select.title)">
    <p>{{ select.title }}</p>
  </div>
</div>
<app-infoapp [selectedArray]="selectedArray"></app-infoapp>

parent.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  public buttonSelector = [];
  public selectedArray = [];

  constructor() { }

  ngOnInit() {
    this.buttonSelector = [{title: 'save'}, {title: 'add'}, {title: 'edit'}, {title: 'delete'}];
  }

  getSelectArray(title: string) {
    this.selectedArray.push({title:title});
  }

}

info-app.component.html

<div class="info" *ngFor="let selected of selectedArray" [@simpleFadeAnimation]="'in'">
    {{ selected.title }}
</div>

info-app.component.ts

import {Component, Input, OnInit} from '@angular/core';
import { trigger, transition, state, style, animate } from '@angular/animations';

@Component({
  selector: 'app-infoapp',
  templateUrl: './info-app.component.html',
  styleUrls: ['./info-app.component.css'],
  animations: [
    trigger('simpleFadeAnimation', [
      state('in', style({opacity: 1})),
      transition(':enter', [
        style({opacity: 0}),
        animate(600 )
      ]),
      transition(':leave',
        animate(600, style({opacity: 0})))
    ])
  ]
})
export class InfoAppComponent implements OnInit {
  @Input() selectedArray = [];

  constructor() {}

  ngOnInit() {}
}