Angular 9 анимация шагового компонента - PullRequest
Новая
       22

Angular 9 анимация шагового компонента

0 голосов
/ 21 апреля 2020

Я пытаюсь создать компонент, который может (потенциально) иметь столько детей, сколько необходимо. Поэтому я создал шаговый компонент, который состоит из двух компонентов: родительского (Stepper) и дочернего (Step). Они довольно просты по конструкции, степпер html выглядит так: 

<div class="panes">
    <ng-content></ng-content>
</div>

И шаг html выглядит так: 

<div [ngClass]="{'expanded': expanded}"><ng-content></ng-content></div>

В моем приложении это немного более продвинутый, но вы поймете идею, если я буду упрощать его :) Я создал стек-блиц здесь:

https://stackblitz.com/edit/angular-jsj2na

Теперь у меня есть степпер Я хотел бы создать некоторые анимации. Я мог сделать это несколькими способами, но я начал с этой идеи:

https://stackblitz.com/edit/angular-pkgh4v

Это работает грубым образом, но не принять во внимание n + шагов. Я хотел бы использовать Angular Анимации, но я не знаю, как передать переменные (или даже если вы можете!) У меня была объявлена ​​эта анимация: 

trigger('slide', [
  state('left', style({ transform: 'translateX(0)' })),
  state('right', style({ transform: 'translateX(-50%)' })),
  transition('* => *', animate(300)),
]),

Но, как вы можете видеть, это работает только с 2 шагами .... Кто-нибудь может помочь?

1 Ответ

0 голосов
/ 21 апреля 2020

Мне удалось довести это до разумного состояния.

https://stackblitz.com/edit/angular-4psjsm

Как видите, мне удалось использовать [style.transform] и [style.width.%] и хотя он работает (и не заботится о количестве шагов), он не использует angular анимацию. Вчера вечером я немного читал и вижу, как передавать переменные в анимацию:

https://medium.com/@danieltamirr / параметризованный- angular -animations-fa73a2727158

Но проблема У меня есть как оговаривать фактическую анимацию. Если кто-то может помочь с этим, я отмечу их как ответ

...