у меня есть одно решение. Но это полезно только в том случае, если вы пытаетесь использовать одну и ту же анимацию несколько раз с разными параметрами, которые вам уже известны.
Например, у меня есть многоразовая анимация для создания эффекта 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.
person
Viktor Sanzharevsky
schedule
16.06.2017