Angular анимация при изменении содержимого модели

Question

Я создаю 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;
}

В моем приложении, когда я нажимаю на кнопки «следующий» и «предыдущий», я изменяю содержимое на экране, например:

app.component.ts

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

  next() {
    this.currentItem++;
  }

  previous() {
    this.currentItem--;
  }

приложение. компонент. html

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

Он работает, как и ожидалось.

Теперь я хочу добавить анимацию (сдвиньте справа налево, когда нажимаете «далее», и сдвиньте Слева направо, когда нажимаете «предыдущий»).

Я прочитал тысячи примеров, используя ngFor, ngIf и так далее, но в моем случае у меня нет ни одной из этих директив. Я должен запускать анимацию при изменении содержимого моей модели или при нажатии кнопки. Как я могу это сделать?

Answer 1

приведенный ниже код является примером анимации. Вы можете добавить анимацию, выполнив следующие действия.

app.component.ts

public nextClass = false;
public preClass= false;
next() {
    this.nextClass = false;
    this.nextClass = true;
    this.preClass = false;
    this.currentItem++;
  }

  previous() {
    this.preClass = false;
    this.nextClass = false;
    this.preClass = true;
    this.currentItem--;
  }

app.component. html

<div [ngClass]="{'next':nextClass, 'pre':preClass}">
  <h1>{{ items[currentItem]?.title }}</h1>
  <p>{{ items[currentItem]?.description}}</p>
</div>
<button (click)="next()"> <button (click)="previous()">

app.component.s css

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