Я играю с API анимации, и я хотел бы создать многоразовую анимацию, например, скажем, скользящую по контенту для просмотров на верхнем уровне маршрутизатора. Мне удалось пройти через напуганный синтаксис метаданных (который на самом деле довольно круто, когда вы преодолеваете сумасшедшую идею использования метаданных), чтобы заставить анимацию работать в основном.
@Component({
//moduleId: module.id,
selector: 'album-display',
templateUrl: './albumDisplay.html',
animations: [
trigger('slideIn', [
state('*', style({
transform: 'translateX(100%)',
})),
state('in', style({
transform: 'translateX(0)',
})),
state('out', style({
transform: 'translateX(-100%)',
})),
transition('* => in', animate('600ms ease-in')),
transition('in => out', animate('600ms ease-in'))
])
]
})
export class AlbumDisplay implements OnInit {
slideInState = 'in';
...
}
И затем назначьте это элементу верхнего уровня в компоненте:
<div class="container" [@slideIn]="slideInState">
Итак, это работает, но как я могу сделать это многоразовым? Я не хочу привязывать эти метаданные ко всем представлениям. Поскольку это метаданные, я не уверен, как вы могли бы сделать это многоразовым.