Angular - ng-Template Animation при открытом / закрытом статусе

Question

Я бы хотел создать анимацию, когда статус моего ng-template изменится, но я ничего не найду в этом компоненте ...

https://ng-bootstrap.github.io/

Это мой report.component.html

<ngb-accordion (click)="arrowRotation(i)" (panelChange)="isOpen($event) "
                   *ngFor="let signature of report.xmlReport.signatures; let i=index">
      <ngb-panel>
        <ng-template ngbPanelTitle>
          <div class="d-flex justify-content-between">
            <p class="v-align">signature {{i + 1}} / {{size}}
              <i *ngIf="signature.errors.length == 0" class="icon-status-ok fa fa-check-circle"></i>
              <i *ngIf="signature.errors.length != 0" class="icon-status-ko fa fa-times"></i>
            </p>
            <fa-icon [id]="arrowID + i" icon="arrow-right"></fa-icon>
          </div>
        </ng-template>
        <ng-template ngbPanelContent>
          <app-signature [signature]="signature">
          </app-signature>
        </ng-template>
      </ngb-panel>
    </ngb-accordion>

Это my report.component.ts

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

@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.css']
})
export class ReportComponent implements OnInit {

  arrowID: string;
  isShow = true;
  openById = {};

  constructor() {
  }

  ngOnInit() {
    this.arrowID = 'arrow_' + this.reportType + '_';
  }

  arrowRotation(id) {
    const icon = document.getElementById(this.arrowID + id);
    console.log('arrowID = ' + this.arrowID + id);

    if (this.isShow === true) {
      icon.style.transition = 'all 0.25s linear';
      icon.style.transform = 'rotate(90deg)';

    } else {
      icon.style.transition = 'all 0.25s linear';
      icon.style.transform = 'rotate(0deg)';
    }
  }

  /**
   * return state of accordion, if accordion is open then it return true
   * @param event get status of accordion
   */
  isOpen(event) {
    this.openById[event.panelId] = event.nextState;
    this.isShow = this.openById[event.panelId];
  }

}

Answer 1

Согласно вашему комментарию: я новичок в Angular, не могли бы вы объяснить мне, как это реализовать?

Я сделал простой пример, который использует c CSS анимация для выполнения своей работы.

Stackblitz: https://stackblitz.com/edit/angular-xedgma?file=src%2Fapp%2Fapp.component.css

Да, я понятия не имею, какие данные вы используете, я сделал простой список текста с пользовательским свойством, которое будет обрабатывать state:

list = [
    {
    name: "test name 1",
    active: false,
    },
    {
    name: "test name 2",
    active: false,
    },
    {
    name: "test name 3",
    active: false,
    },
    {
    name: "test name 4",
    active: false,
    },
  ];

Итерация через html - это просто ngFor с ngClass для каждой строки:

<ng-container *ngFor="let data of list; let i = index">
  <div class="single-item" [ngClass]="[data.active ? 'single-item-active':'single-item-not-active']" (click)="toggleActiveClass(i)">
    {{data.name}}
  </div>
</ng-container>

Я использовал ng-контейнер вместо div, потому что ng-контейнер не отображается в DOM.

Часть css:

.single-item {
  height: 30px;
  line-height: 30px;
  background-color: grey;
  margin-bottom: 10px;
  box-sizing: border-box;
  width: 200px;
  transition: all 0.2s ease-in;
}

.single-item::after {
  content: ' >>> click me';
  cursor: pointer;
}

.single-item-not-active {
  padding-left: 0px;
}

.single-item-active {
  padding-left: 10px;
}

наконец, функция, изменяющая состояние, которой требуется индекс строки, повторяется:

public toggleActiveClass(index: number): void {
    this.list[index].active = !this.list[index].active;
  }

Имейте в виду одну вещь:

Вы не можете анимировать все свойства в css. Например, вы не можете анимировать изменение text-decoration.