私には1つの解決策があります。ただし、既に知っているさまざまなパラメーターを使用して同じアニメーションを何度も使用しようとする場合にのみ役立ちます。
たとえば、slideUp-slideDown 効果を作成するための再利用可能なアニメーションがあります。そして、折りたたまれた状態では、コンテナーはある程度の高さを維持する必要があります (これらのコンテナーについては既に知っています)。
アニメーション:
import { style, trigger, state, transition, animate } from "@angular/animations";
export const slideUpDownAnimation = (height) => {
return trigger(`slideUpDownAnimation${height}`, [
state('0', style({
overflow: 'hidden',
height: '*'
})),
state('1', style({
overflow: 'hidden',
height: `${height}px`
})),
transition('1 => 0', animate('400ms ease-in-out')),
transition('0 => 1', animate('400ms ease-in-out'))
]);
};
コンポーネントのクラス:
import { slideUpDownAnimation } from "../../animations/slide-up-down.animation";
@Component({
moduleId: module.id,
selector: 'new-order',
templateUrl: './new-order.component.html',
animations: [
slideUpDownAnimation(32), // will return trigger named "slideUpDownAnimation32"
slideUpDownAnimation(60) // will return trigger named "slideUpDownAnimation60"
]
})
export class NewOrderComponent {...
最後に、コンポーネントの html で:
<div class="header-fields"
[@slideUpDownAnimation32]="collapsedFields">
...
<div class="line-group"
*ngFor="let group of lineGroups; let g = index"
[@slideUpDownAnimation60]="group.collapsed">
...
残念ながら、デコレータとhtmlで定義する必要があるため、動的パラメータには使用できません。