Javascript Angular6-更改值时的动画

我在谷歌上搜索了“如何做我想做的事”，尝试了一些东西，但都不管用，我找到了很多AngularJS教程，但没有找到Angular6。。所以我希望你能帮助我

我想在数组的值发生变化时（单击时）进行淡入淡出，所以我下载了ng animate，但它没有提供我想要的行为。 目前，我有两个组件，第一个：

HTML:

因此，现在当我刷新页面时，组件正在淡出，这很酷，但当我通过单击按钮更改数组，以便将另一个数组发送到我的“app infoapp”组件时，它不会再次设置动画

我希望我是清楚的，你能帮助我

如果你需要更多的信息或者我不清楚，告诉我，我会尽快回答

---

谢谢。

我用示例代码尝试了我向您建议的相同示例（kdechant.com/blog/angular animations fade-in and fade-out），它正在工作：

在应用程序模块（app.module.ts）中导入BrowserAnimationsModule：

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>

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

info-app.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>

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

---

Angular 2自带了自己的动画模块'“@angular/animations”，您可以找到许多关于这方面的优秀教程，并使用不透明度更改实现淡入动画。首先，谢谢你的回答。我试图按照教程进行操作，但我遇到了同样的问题：当我重新加载页面时，动画清晰可见，但当我通过单击我的按钮更改发送数组的值时，第二次动画就没有了：/I我为您的答案创建了一个stackblitz。

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});
  }

}

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

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() {}
}