Angular 模型内容更改时的角度动画

我正在构建一个Angular 7应用程序。我有这样一个JSON：

[
  {
      "title": "Hello",      
      "description": "Lorem ipsum"
  },
  {
      "title": "Hi",      
      "description": "Dolor amet"
  },
  ...
]

我正在将此JSON解析为我的模型：

item.model.ts

export class Item {
  public title: string;
  public description: string;
}

在我的应用程序中，当我单击“下一步”和“上一步”按钮时，我会更改屏幕上的内容，如下所示：

[
  {
      "title": "Hello",      
      "description": "Lorem ipsum"
  },
  {
      "title": "Hi",      
      "description": "Dolor amet"
  },
  ...
]

app.component.ts

  public items: Array<Item> = [];
  public currentItem: number;

  next() {
    this.currentItem++;
  }

  previous() {
    this.currentItem--;
  }

公共项：数组=[]；
公共项目：编号；
下一个（）{
这个.currentItem++；
}
前（）{
此.currentItem--；
}

app.component.html

<div>
  <h1>{{ items[currentItem]?.title }}</h1>
  <p>{{ items[currentItem]?.description}}</p>
</div>
<button (click)="next()"> <button (click)="previous()">

{{items[currentItem]？.title}
{{items[currentItem]？.description}

它正在按预期工作

现在我想在上面添加一个动画（单击“下一步”时从右向左滑动，单击“上一步”时从左向右滑动）

---

我阅读了上千个使用ngFor、ngIf等的示例，但就我而言，我没有这些指令。我应该在模型内容更改或单击按钮时触发动画。如何才能做到这一点？

下面的代码是一个动画示例，您可以按照以下步骤添加动画

app.component.ts

  public items: Array<Item> = [];
  public currentItem: number;

  next() {
    this.currentItem++;
  }

  previous() {
    this.currentItem--;
  }

public nextClass=false；
公共预类=假；
下一个（）{
this.nextClass=false；
this.nextClass=true；
this.preClass=false；
这个.currentItem++；
}
前（）{
this.preClass=false；
this.nextClass=false；
this.preClass=true；
此.currentItem--；
}

app.component.html

<div>
  <h1>{{ items[currentItem]?.title }}</h1>
  <p>{{ items[currentItem]?.description}}</p>
</div>
<button (click)="next()"> <button (click)="previous()">

{{items[currentItem]？.title}
{{items[currentItem]？.description}

app.component.scss

::ng-deep{
.next{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: myfirst 5s;
    animation-fill-mode: forwards;
}

@keyframes myfirst {
    from {width: 0px;}
    to {width: 100px; background-color: blue;}
}
}

---

写CSS动画来完成你的目标，然后通过NgClass在属性改变时切换类。你能给我一个例子吗？