Angular-ng模板动画处于打开/关闭状态

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的初学者，你能向我解释如何实现这一点？

我做了一个简单的例子，使用基本的CSS动画来完成它的工作。

堆叠闪电战：https://stackblitz.com/edit/angular-xedgma?file=src%2Fapp%2Fapp.component.css

Sice我不知道你在用什么样的数据我用一个自定义属性做了一个简单的文本列表，它将处理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的更改设置动画。